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


439

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

Answers:


628

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

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

object["property"] = value;

要么

object.property = value;

如果您提供一些额外的信息,例如您在上下文中确实需要做的事情,那么您可能会得到一个更量身定制的答案。


6
@shanehoban这里a是JSON,a.s正如您所定义的是一个字符串。现在,您尝试添加["subproperty"]到字符串。您现在知道您为什么收到错误消息了吗?
shivam 2014年

1
对于初学者,请记住,正如Quintin所说的,JSON“对象”根本不是对象,而只是一个字符串。您需要使用JSON.parse()将其转换为实际的Javascript对象,然后再使用他的示例object["property"] = value;
SpaceNinja 2015年

2
@shanehoban在顶部检查我的答案,您将看到如何立即添加多个属性。
维克多·奥古斯托

1
@EduardoLucio那是因为您应该使用JSON.stringify
所罗门·乌科

1
@EduardoLucio问题不在于console.log序列化。使用console.log(JSON. stringify(object))
所罗门·乌科

182
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);

6
正是我想要的,在必须以编程方式构造名称时添加一个元素
quilkin

4
很好的例子。这对我有帮助。
瑞奇

152

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

mything.NewField = 'foo';

就是这样,我喜欢javascript原型!
caglaror

70

感谢这篇文章。我想添加一些有用的东西。

对于IE来说,很好用

object["property"] = value;

语法,因为IE中的一些特殊字词可能会给您带来错误。

一个例子:

object.class = 'value';

这在IE中失败,因为“ class ”是一个特殊的词。我花了几个小时。


@Sunil Garg您将如何将该值作为子级存储给原始对象中的某些父级?
杰米·科克希尔

42

从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 };

13

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

const myObject = {};

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

附言:这将不会覆盖具有分配属性的现有对象。而是将它们添加。但是,如果将值分配给现有属性,则它将被覆盖。


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对象


2

您还可以使用扩展功能将新的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}}

2

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

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

结果是:

{
    amount: 1, 
    amount__more: 2
}

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.