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

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

1282303 次浏览

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

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

object["property"] = value;

object.property = value;

如果你提供一些额外的信息,比如在上下文中你需要做什么,你可能会得到一个更有针对性的答案。

JSON对象只是一个javascript对象,所以javascript是一种基于原型的语言,你所要做的就是使用点表示法来处理它。

mything.NewField = 'foo';

谢谢你写这篇文章。我想补充一些有用的东西。

对于IE来说,它很好用

object["property"] = value;

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

一个例子:

object.class = 'value';

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

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);
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对象吗

您还可以使用扩展函数在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}}

使用jquery中的$.extend(),如下所示:

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

我希望你为他们服务。

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

const myObject = {};


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

Ps:这将不会覆盖现有的对象与分配的属性。相反,它们会被添加。但是,如果您将一个值赋给一个现有的属性,那么它将被覆盖。

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

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

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

结果:

{
amount: 1,
amount__more: 2
}
下面为我添加了一个名为“id”的新字段。 Angular Slickgrid通常需要这样的id

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