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

【问题标题】：Add new attribute (element) to JSON object using JavaScript使用 JavaScript 向 JSON 对象添加新属性（元素）
【发布时间】：2010-10-18 16:56:57
【问题描述】：

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

【问题讨论】：

标签： javascript json

【解决方案1】：

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

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

object["property"] = value;

或

object.property = value;

如果您提供一些额外的信息，例如您需要在上下文中做什么，您可能会得到更量身定制的答案。

【讨论】：

@shanehoban 这里 a 是 JSON，a.s 正如你刚刚定义的那样是一个字符串。现在您正尝试将["subproperty"] 添加到字符串中。你现在明白为什么会出现错误了吗？
对于初学者，请记住，正如 Quintin 所说，JSON“对象”根本不是对象，它只是一个字符串。在使用他的 object["property"] = value; 示例之前，您需要使用 JSON.parse() 将其转换为实际的 Javascript 对象
@shanehoban 检查我在顶部的答案，您将了解如何一次添加多个属性。
@EduardoLucio 那是因为你应该使用JSON.stringify。
@EduardoLucio 问题是console.log 不适合序列化。使用console.log(JSON. stringify(object))。

【解决方案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);

【讨论】：

正是我想要的，当必须以编程方式构造名称时添加一个元素
很好的例子。这对我有帮助。

【解决方案3】：

JSON 对象只是一个 javascript 对象，因此 Javascript 是一种基于原型的语言，您所要做的就是使用点符号来处理它。

mything.NewField = 'foo';

【讨论】：

就是这样，我喜欢javascript原型！

【解决方案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 };

【讨论】：

【解决方案5】：

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

对于IE来说，很好用

object["property"] = value;

语法，因为 IE 中的一些特殊词可能会给你一个错误。

一个例子：

object.class = 'value';

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

【讨论】：

@Sunil Garg 您将如何将该值作为子对象存储到原始对象中的某个父对象？

【解决方案6】：

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

const myObject = {};

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

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

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

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

将生成单个 json 对象

【讨论】：

【解决方案8】：

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

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

结果：

{
    amount: 1, 
    amount__more: 2
}

【讨论】：

【解决方案9】：

您还可以使用 extend 函数将新的 json 对象添加到您的 json 中，

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

扩展函数的一个很好的选择是递归合并。只需添加真值作为第一个参数（阅读文档以获取更多选项）。例如，

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

【讨论】：

extend() 是 jQuery 的一部分

【解决方案10】：

使用 jquery 的 $.extend()，如下所示：

token = {_token:window.Laravel.csrfToken};
data = {v1:'asdass',v2:'sdfsdf'}
dat = $.extend(token,data);

我希望你为他们服务。

【讨论】：