代码之家 › 专栏 › 技术社区 › 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);

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

7 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

user3472810 · Angular@Output/EventEmitter返回undefined

7 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

7 月前