Question

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

Answer 1

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

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

object["property"] = value;

或

object.property = value;

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

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

Answer 3

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

mything.NewField = 'foo';

Answer 4

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

对于IE，最好使用

object["property"] = value;

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

一个例子：

object.class = 'value';

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

Answer 5

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

const myObject = {};

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

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

Answer 6

使用ECMAScript 2015，您可以使用扩展语法（…三个点）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>foo</title>
    <style type="text/css" media="screen">
      .container {
        display: flex;
      }
      .one, .two, .three {
        height 200px;
      }
      .one {
        background-color: red;
      }
      .two {
        background-color: green;
      }
      .three {
        background-color: blue;
      }

      .inline {
        border: none;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="one">
        <iframe class="inline" srcdoc="<div><h1>my parent was not properly closed</h1>"></iframe>
      </div>
      <div class="two">
        <iframe class="inline" srcdoc="<div><div><h2>nor mine</h2>"></iframe>
      </div>
      <div class="three">
        <iframe class="inline" srcdoc="<div><div><div><h3>neither was mine</h3>"></iframe>
      </div>
    </div>
  </body>
</html>

它允许您添加子对象：

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

结果将是：

people = {...people, city:{estate: 'Alabama'}};

您还可以合并对象：

{  
   "id":4,
   "firstName":"John",
   "secondName":"Forget",
   "city":{  
      "estate":"Alabama"
   }
}

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

Answer 8

您还可以使用extend函数

将新的json对象添加到json中

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

extend函数的一个非常好的选项是递归合并。只需添加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}}

Answer 9

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

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

我希望你能为他们服务。

Answer 10

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

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

结果：

{
    amount: 1, 
    amount__more: 2
}

Answer 11

for(var i=0;i<JsonObject.length;i++){
                    alert("inside forloop");
                    var dataArray = JsonObject[i];
                    alert(dataArray["data"]);

            }

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

11 个答案: