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

【问题标题】：Adding a new array element to a JSON object向 JSON 对象添加新的数组元素
【发布时间】：2013-09-23 22:58:12
【问题描述】：

我从一个名为 teamJSON 的变量中的 JSON 文件中读取了一个 JSON 格式对象，如下所示：

 {"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"}]}

写回文件之前。添加新元素的好方法是什么？我接近了，但所有的双引号都被转义了。我已经在 SO 上寻找了一个很好的答案，但没有一个完全涵盖这种情况。任何帮助表示赞赏。

【问题讨论】：

yourObj.theTeam.push({"teamId":"4","status":"pending"});
当您从文件中读取 JSON 对象时，它是被解释为 JSON 还是字符串？如果它是一个字符串，您需要先将字符串解析为 JSON，然后您可以按照其他评论和答案的建议进行操作。
@brad - 我没有说 JSON 是一个对象 - 我说我有一个 JSON 格式的对象。感谢您的快速回复。
@Charles 阅读您的标题，然后重新检查您的评论。
@CharlesWyke-Smith 你的teamJSON 变量是什么类型的？它是 JSON 字符串，即 '{"theTeam":[...]}' 还是实际的对象文字？提示：使用console.log(typeof teamJSON)

标签： javascript json

【解决方案1】：

JSON 只是一个符号；进行您想要的更改 parse 它以便您可以将更改应用到本机 JavaScript 对象，然后将 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"}]}"

【讨论】：

+1 指出需要先将其解析为要操作的对象。
他说他已经在一个名为teamJSON的变量中拥有了该对象。在任何时候都没有提到字符串
@Phil：如果是 JSON，它就是一个字符串。如果不是，则不是 JSON。
转义的引号实际上让我怀疑 JSON 是否被编码了两次。
保罗，这是一个非常有建设性的答案。它在不贬低原始海报的情况下解决了问题陈述中的缺陷。它更清楚地描绘了对 javascript 对象进行操作和这些对象的 JSON 文本表示之间的界限。我认为理解一旦 JSON 被解析，我们就在纯 javascript 对象上操作是很重要的——它们最初来自 JSON 的事实是无关紧要的。无论如何，在所有贬义的cmets让OP感觉像个白痴之后，阅读您的答案是一股新鲜空气。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

例如，这里有一个类似按钮的元素，用于将项目添加到购物篮，以及用于保存在 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","price":"767","image":"1462012597217.jpeg"},{"id":"93", "nameEn":"Product Name2","price":"76","image":"1461449637106.jpeg"},{"id":"94","nameEn":"Product Name3","price": "87","图片":"1461449679506.jpeg"}]

执行此操作后，您可以轻松地将数据作为 Java 中的 List 发送到服务器

完整的代码示例在这里

How do I store a simple cart using localStorage?

【讨论】：

【解决方案4】：

首先我们需要解析 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.stringify把obj转回JSON

【讨论】：

如果我们的 JSON 没有像 theTeam 这样的名称，而是只包含带有元素 teamId 和 status 的节点怎么办？所以我的看起来像： var str = '[{"teamId":"1","status":"pending"}, {"teamId":"2","status":"member"},{"teamId ":"3","status":"会员"}]';
Shafique：那就更简单了。只需删除 ['theTeam']。 obj 之后的部分。所以：obj.push(...)

【解决方案5】：

在我的例子中，我的 JSON 对象中没有任何现有的数组，所以我必须先创建数组元素，然后再推送元素。

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

（此答案可能与此特定问题无关，但可能会有所帮助别人）

【讨论】：