使用JavaScript将新属性(元素)添加到JSON对象

416 javascript json

如何使用JavaScript向JSON对象添加新属性(元素)?

Qui*_*son 599

JSON代表JavaScript Object Notation.JSON对象实际上是一个尚未转换为它所代表的对象的字符串.

要在JS中向现有对象添加属性,可以执行以下操作.

object["property"] = value;
Run Code Online (Sandbox Code Playgroud)

要么

object.property = value;
Run Code Online (Sandbox Code Playgroud)

如果你提供一些额外的信息,比如你在上下文中需要做什么,你可能会得到一个更加量身定制的答案.

  • @shanehoban这里`a`是JSON,`as`就像你刚才定义的那样是一个字符串.现在您尝试将`["subproperty"]`添加到字符串中.你现在明白为什么你得到了这个错误吗? (6认同)
  • 对于初学者,请记住,正如 Quintin 所说,JSON“对象”根本不是对象,它只是一个字符串。在使用他的 `object["property"] = value; 示例之前,您需要使用 JSON.parse() 将其转换为实际的 Javascript 对象 (2认同)
  • @shanehoban在顶部检查我的答案,你会看到如何一次添加多个属性. (2认同)

Cod*_*ody 176

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);
Run Code Online (Sandbox Code Playgroud)

  • 很好的例子。这对我有帮助。 (5认同)
  • 正是我所寻找的,在必须以编程方式构造名称时添加元素 (4认同)

Fly*_*wat 145

JSON对象只是一个javascript对象,因此Javascript是基于原型的语言,您所要做的就是使用点表示法来解决它.

mything.NewField = 'foo';
Run Code Online (Sandbox Code Playgroud)


小智 62

谢谢你的帖子.我想添加一些有用的东西.

对于IE,它很好用

object["property"] = value;
Run Code Online (Sandbox Code Playgroud)

语法因为IE中的一些特殊单词会给你一个错误.

一个例子:

object.class = 'value';
Run Code Online (Sandbox Code Playgroud)

这在IE中失败了,因为" class "是一个特殊的词.我用了几个小时.


Cas*_*rin 28

使用ECMAScript 2015,您可以使用Spread Syntax(...三个点):

let  people = {id: 4 ,firstName: 'John'};
people = {...people, secondName:'Forget'};
Run Code Online (Sandbox Code Playgroud)

它允许您添加子对象:

people = {...people, city:{estate: 'Alabama'}};
Run Code Online (Sandbox Code Playgroud)

结果将是:

{  
   "id":4,
   "firstName":"John",
   "secondName":"Forget",
   "city":{  
      "estate":"Alabama"
   }
}
Run Code Online (Sandbox Code Playgroud)

您还可以合并对象:

var mergedObj = { ...obj1, ...obj2 };
Run Code Online (Sandbox Code Playgroud)


Vic*_*sto 13

您还可以使用Object.assignECMAScript 2015.它还允许您一次添加嵌套属性.例如:

const myObject = {};

Object.assign(myObject, {
    firstNewAttribute: {
        nestedAttribute: 'woohoo!'
    }
});
Run Code Online (Sandbox Code Playgroud)

Ps:这不会覆盖具有指定属性的现有对象.相反,他们将被添加.但是,如果为现有属性分配值,则会覆盖它.


小智 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;
}
Run Code Online (Sandbox Code Playgroud)

扩展多个json对象(忽略函数):

extend({obj: 'hej'}, {obj2: 'helo'}, {obj3: {objinside: 'yes'}});
Run Code Online (Sandbox Code Playgroud)

将导致单个json对象


Ste*_*ein 5

您还可以直接在对象文字中动态添加带有变量的属性。

const amountAttribute = 'amount';
const foo = {
                [amountAttribute]: 1
            };
foo[amountAttribute + "__more"] = 2;
Run Code Online (Sandbox Code Playgroud)

结果是:

{
    amount: 1, 
    amount__more: 2
}
Run Code Online (Sandbox Code Playgroud)