向JSON对象添加新的数组元素


120

我有一个从JSON文件读取的JSON格式对象,该对象包含在一个名为teamJSON的变量中,如下所示:

 {"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}

我想向数组添加一个新项,例如

{"teamId":"4","status":"pending"}

最终

{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"},{"teamId":"4","status":"pending"}]}

在写回文件之前。什么是添加到新元素的好方法?我接近了,但所有双引号都被转义了。我一直在寻找一个很好的答案,但是没有一个案例能解决这个问题。任何帮助表示赞赏。


6
yourObj.theTeam.push({"teamId":"4","status":"pending"});
PSL 2013年

2
“ JSON”不是对象,而是一种表示法。
布拉德·克里斯蒂

1
从文件中读取JSON对象时,该对象是解释为JSON还是字符串?如果它是一个字符串,则需要首先将其解析为JSON,然后您可以执行其他注释和答案所建议的操作。
2013年

3
@Charles阅读您的标题,然后重新检查您的评论。
布拉德·克里斯蒂

1
@ CharlesWyke-Smith您的teamJSON变量是什么类型?它是JSON字符串,即'{"theTeam":[...]}'是实际的对象文字吗?提示:使用console.log(typeof teamJSON)
Phil

Answers:


233

JSON只是一种表示法;进行所需的更改parse,以便可以将更改应用于本地JavaScript Object,然后stringify返回JSON

var jsonStr = '{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

var obj = JSON.parse(jsonStr);
obj['theTeam'].push({"teamId":"4","status":"pending"});
jsonStr = JSON.stringify(obj);
// "{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"},{"teamId":"4","status":"pending"}]}"

16
+1指出这一点需要首先解析为一个要操作的对象。
布拉德·克里斯蒂

3
他说他已经在名为的变量中包含该对象teamJSON。丝毫没有提及
Phil

6
@Phil:如果是JSON,则为字符串。如果不是,则不是JSON。
user2736012 2013年

1
转义的引号实际上使我想知道JSON是否编码两次。
user2736012 2013年

24
保罗,这是一个非常有建设性的答案。它解决了问题陈述中的缺陷,而没有贬低原始的张贴者。它更清楚地描述了对javascript对象进行操作和这些对象的JSON文本表示之间的界限。我认为了解以下内容至关重要:一旦解析了JSON,我们就在纯JavaScript对象上进行操作-它们最初来自JSON的事实是无关紧要的。无论如何,在所有贬义的评论让OP像个白痴之后,阅读您的答案是新鲜的呼吸。
拉里·赫克托

20
var Str_txt = '{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

如果你想 添加到最后一个位置,请使用以下命令:

var parse_obj = JSON.parse(Str_txt);
parse_obj['theTeam'].push({"teamId":"4","status":"pending"});
Str_txt = JSON.stringify(parse_obj);
Output //"{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"},{"teamId":"4","status":"pending"}]}"

如果你想 添加到第一个位置,请使用以下代码:

var parse_obj = JSON.parse(Str_txt);
parse_obj['theTeam'].unshift({"teamId":"4","status":"pending"});
Str_txt = JSON.stringify(parse_obj);
Output //"{"theTeam":[{"teamId":"4","status":"pending"},{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}"

任何想要的人 数组的特定位置添加的尝试以下操作:

parse_obj['theTeam'].splice(2, 0, {"teamId":"4","status":"pending"});
Output //"{"theTeam":[{"teamId":"1","status":"pending"},{"teamId":"2","status":"member"},{"teamId":"4","status":"pending"},{"teamId":"3","status":"member"}]}"

上面的代码块在第二个元素之后添加一个元素。


1

首先,我们需要解析JSON对象,然后可以添加一个项目。

var str = '{"theTeam":[{"teamId":"1","status":"pending"},
{"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]}';

var obj = JSON.parse(str);
obj['theTeam'].push({"teamId":"4","status":"pending"});
str = JSON.stringify(obj);

最后,我们将JSON.stringifyobj返回JSON


如果我们的JSON没有像TheTeam这样的名称,而是仅包含具有teamId和status元素的节点怎么办?所以我的样子是:var str ='[{“ teamId”:“ 1”,“ status”:“待定”},{“ teamId”:“ 2”,“ status”:“ member”},{“ teamId “:” 3“,”状态“:”成员“}]'';
Shafique

0

例如,这是一个元素,例如用于将项目添加到购物篮的按钮,以及用于保存在localStorage中的适当属性。

'<a href="#" cartBtn pr_id='+e.id+' pr_name_en="'+e.nameEn+'" pr_price="'+e.price+'" pr_image="'+e.image+'" class="btn btn-primary"><i class="fa fa-shopping-cart"></i>Add to cart</a>'

var productArray=[];


$(document).on('click','[cartBtn]',function(e){
  e.preventDefault();
  $(this).html('<i class="fa fa-check"></i>Added to cart');
  console.log('Item added ');
  var productJSON={"id":$(this).attr('pr_id'), "nameEn":$(this).attr('pr_name_en'), "price":$(this).attr('pr_price'), "image":$(this).attr('pr_image')};


  if(localStorage.getObj('product')!==null){
    productArray=localStorage.getObj('product');
    productArray.push(productJSON);  
    localStorage.setObj('product', productArray);  
  }
  else{
    productArray.push(productJSON);  
    localStorage.setObj('product', productArray);  
  }


});

Storage.prototype.setObj = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObj = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}

将JSON对象添加到Array后,结果是(在LocalStorage中):

[{“ id”:“ 99”,“ nameEn”:“产品名称1”,“价格”:“ 767”,“图像”:“ 1462012597217.jpeg”},{“ id”:“ 93”,“ nameEn” :“产品名称2”,“价格”:“ 76”,“图像”:“ 1461449637106.jpeg”},{“ id”:“ 94”,“ nameEn”:“产品名称3”,“价格”:“ 87” ,“ image”:“ 1461449679506.jpeg”}]

完成此操作后,您可以轻松地将数据作为Java中的列表发送到服务器

完整的代码示例在这里

如何使用localStorage存储简单的购物车?


0

就我而言,我的JSON对象中没有任何现有的Array,因此我必须先创建array元素,然后再推送该元素。

  elementToPush = [1, 2, 3]
  if (!obj.arr) this.$set(obj, "arr", [])
  obj.arr.push(elementToPush)  

(此答案可能与此特定问题无关,但可能会对其他人有所帮助)


0

假设我们已经有变量中的数据了alreadyData

var alreadyData=[{"id":"99","nameEn":"Product Name1","price":"767","image":"1462012597217.jpeg"},{"id":"93","nameEn":"Product Name2","price":"76","image":"1461449637106.jpeg"},{"id":"94","nameEn":"Product Name3","price":"87","image":"1461449679506.jpeg"}];

var fields = []; //new array
var json = JSON.parse(alreadyData); //just parse in one variable
var json = JSON.parse(tableColumns);
for (var i = 0; i < json.length; i++) {
    fields.push(json[i]);//push data in fields
} 
fields.push({ 'id':33, 'nameEn': 'Singh', 'price': '222','image': '1462012597217.jpeg' }); // its new data
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.