代码之家 › 专栏 › 技术社区 › user2371684

将新对象作为对象推送到数组中

javascript

user2371684 · 技术社区 · 6 年前

我需要了解如何将两个键值对推送到对象中的数组中。

对象如下:

const todos = [{
  text: 'Order airline tickets',
  completed: false
},{
  text: 'Vaccine appointment',
  completed: true
}, {
  text: 'Order Visa',
  completed: true
}, {
  text: 'Book hotell',
  completed: false
}, {
  text: 'Book taxi to airport',
  completed: true
}]

我已经创建了一个带有表单和文本输入的HTML页面来创建新项目数组:

<form action="" id="addTodo">
 <input type="text" name="inputTodo" placeholder="Insert new todo">
 <button>Add Todo</button> 
 </form>

JS代码如下:

//Variable to store value from textbox for new todo
let newTodo = ''
let status = false
//Insert new todo
document.querySelector('#addTodo').addEventListener('submit', function (e) {
    e.preventDefault()
    newTodo = e.target.elements.inputTodo.value
    //console.log(newTodo)
})

新TODO的完成值将始终为假。我有一个单独的函数,它在对象中循环,并在一个DIV中显示文本部分的P标记,以及完成状态为“假”或“真”的单选按钮。

我需要学习的是如何插入表单的值并将其推入todos.text,并获取硬编码的值false并将其推入todos.completed。

谢谢

2 回复 | 直到 6 年前

Mamun 6 年前

您必须以输入元素为目标来获取值。然后用该值构成对象并使用 Array.prototype.push() 要推动数组中的对象:

document.querySelector('[name="inputTodo"]').value

const todos = [{
  text: 'Order airline tickets',
  completed: false
},{
  text: 'Vaccine appointment',
  completed: true
}, {
  text: 'Order Visa',
  completed: true
}, {
  text: 'Book hotell',
  completed: false
}, {
  text: 'Book taxi to airport',
  completed: true
}]

let newTodo = ''
let status = false
//Insert new todo
document.querySelector('#addTodo').addEventListener('submit', function (e) {
    e.preventDefault()
    newTodo = document.querySelector('[name="inputTodo"]').value;
    todos.push({text: newTodo, completed: false});
    console.log(todos)
})

<form action="" id="addTodo">
 <input type="text" name="inputTodo" placeholder="Insert new todo">
 <button>Add Todo</button> 
 </form>

Shomz 6 年前

应该是这样的:

todos.push({
    text: e.target.elements.inputTodo.value,
    completed: false
});

或者,如果要使用临时变量:

todos.push({
    text: newTodo,
    completed: status
});

甚至可以定义一个新的临时对象并将其推送:

var newTodoObject = {
    text: newTodo,
    completed: status
}
todos.push(newTodoObject);

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前