使用JavaScript向JSON对象添加新属性（元素）

Question

如何使用JavaScript向JSON对象添加新属性（元素）？

- Sri

Answer 1

JSON代表JavaScript对象表示法。 JSON对象实际上是一个尚未转换为其表示的对象的字符串。

要向JS中的现有对象添加属性，可以执行以下操作。

object["property"] = value;

或者

object.property = value;

如果您提供一些额外信息，例如在上下文中需要完成的确切任务，您可能会得到更加个性化的答案。

- Quintin Robinson

---

@shanehoban，这里的a是JSON格式，而你刚定义的a.s是一个字符串。现在你正在尝试将["subproperty"]添加到一个字符串中。你现在明白为什么会出现错误了吗？ - shivam

对于初学者，请记住，正如Quintin所说，JSON“对象”实际上不是一个对象，它只是一个字符串。在使用他的示例object["property"] = value;之前，您需要使用JSON.parse()将其转换为实际的Javascript对象。 - SpaceNinja

@shanehoban请查看我在顶部的答案，你会看到如何一次添加多个属性。 - Victor Augusto

@EduardoLucio 这是因为你应该使用JSON.stringify。 - Solomon Ucko

@EduardoLucio 问题在于 console.log 不适用于序列化。请使用 console.log(JSON.stringify(object))。 - Solomon Ucko

Answer 2

var jsonObj = {
    members: 
           {
            host: "hostName",
            viewers: 
            {
                user1: "value1",
                user2: "value2",
                user3: "value3"
            }
        }
}

var i;

for(i=4; i<=8; i++){
    var newUser = "user" + i;
    var newValue = "value" + i;
    jsonObj.members.viewers[newUser] = newValue ;

}

console.log(jsonObj);

- Cody

---

正是我所需要的，当名称必须以编程方式构建时添加一个元素。 - quilkin

很好的例子。这对我有帮助。 - Ricky

当jsonObj本身包含多个元素时，使用jsonObj["members"].anyname = "value"; 在第一层级添加一个元素。这在以下情况下特别有趣：for (var key in jsonObj ) { jsonObj[key].newAttrib= 'something '; } - Martin

Answer 3

JSON对象就是一个JavaScript对象，因此由于JavaScript是基于原型的语言，所以您只需要使用点符号访问它即可。

mything.NewField = 'foo';

- FlySwat

---

就是这样，我爱 JavaScript 原型！ - caglaror

Answer 4

自2015年起，使用ECMAScript，您可以使用展开语法（...三个点）：

let  people = { id: 4 ,firstName: 'John'};
people = { ...people, secondName: 'Fogerty'};

它允许您添加子对象：

people = { ...people, city: { state: 'California' }};

结果将会是：

{  
   "id": 4,
   "firstName": "John",
   "secondName": "Forget",
   "city": {  
      "state": "California"
   }
}

你也可以合并对象：

var mergedObj = { ...obj1, ...obj2 };

- Cassio Seffrin

Answer 5

感谢这篇文章。我想补充一些可能有用的内容。

对于IE浏览器，使用

object["property"] = value;

因为IE中的一些特殊单词可能会导致错误，所以需要注意语法。

例如：

object.class = 'value';

因为class是一个特殊的单词，所以这在IE上失败了。我花了几个小时来解决这个问题。

- leo

---

@Sunil Garg，您如何将该值存储为原始对象中某个父级的子项？ - user6233283

Answer 6

您还可以使用来自ECMAScript 2015的Object.assign。 它还允许您一次添加嵌套属性。 例如：

const myObject = {};

Object.assign(myObject, {
    firstNewAttribute: {
        nestedAttribute: 'woohoo!'
    }
});

注意：这不会覆盖具有指定属性的现有对象。相反，它们将被添加。但是，如果您为现有属性分配一个值，则该值将被覆盖。

- Victor Augusto

Answer 7

extend: function(){
    if(arguments.length === 0){ return; }
    var x = arguments.length === 1 ? this : arguments[0];
    var y;

    for(var i = 1, len = arguments.length; i < len; i++) {
        y = arguments[i];
        for(var key in y){
            if(!(y[key] instanceof Function)){
                x[key] = y[key];
            }
        }           
    };

    return x;
}

扩展多个JSON对象（忽略函数）：

extend({obj: 'hej'}, {obj2: 'helo'}, {obj3: {objinside: 'yes'}});

会产生一个 JSON 对象。

- Ivan

Answer 8

您可以在对象字面量中直接使用变量动态添加属性。

const amountAttribute = 'amount';
const foo = {
                [amountAttribute]: 1
            };
foo[amountAttribute + "__more"] = 2;

结果显示：

{
    amount: 1, 
    amount__more: 2
}

- Stefan Rein

Answer 9

您可以使用extend函数向您的json中添加新的json对象。

var newJson = $.extend({}, {my:"json"}, {other:"json"});
// result -> {my: "json", other: "json"}

扩展功能的一个很好的选择是递归合并。只需将true值作为第一个参数添加（阅读文档以了解更多选项）。示例：

var newJson = $.extend(true, {}, {
    my:"json",
    nestedJson: {a1:1, a2:2}
}, {
    other:"json",
    nestedJson: {b1:1, b2:2}
});
// result -> {my: "json", other: "json", nestedJson: {a1:1, a2:2, b1:1, b2:2}}

- Georgios Syngouroglou

---

extend() 是 jQuery 的一部分。 - Marcin Orlowski

Answer 10

以下方法适用于我添加一个名为'id'的新字段。Angular Slickgrid通常需要这样的id。

  addId() {
     this.apiData.forEach((item, index) => {
     item.id = index+1;
  });

- Anish Kutti