向JSON对象添加新数组元素

Question

我有一个JSON格式的对象，从一个名为teamJSON的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上寻找了一个好答案，但没有一个完全涵盖这种情况。感谢任何帮助。

- Charles Wyke-Smith

---

你的对象.theTeam.push({"teamId": "4", "status": "pending"}); - PSL

当您从文件中读取JSON对象时，它被解释为JSON还是字符串？如果是字符串，则需要首先将字符串解析为JSON，然后才能执行其他评论和答案所建议的操作。 - Mark

@brad - 我没有说JSON是一个对象 - 我说我有一个JSON格式的对象。感谢您的快速回复。 - Charles Wyke-Smith

@Charles读了你的标题，然后重新审视了你的评论。 - Brad Christie

@CharlesWyke-Smith 你的 teamJSON 变量是什么类型？它是一个 JSON 字符串，比如 '{"theTeam":[...]}' 还是一个实际的对象字面量？提示：使用 console.log(typeof teamJSON)。 - Phil

@brad - 是的 - 我承认了！我有点太快了 - 准确性很重要！ - Charles Wyke-Smith

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

- Paul S.

---

感谢指出需要先将其解析为对象才能进行操作。+1 - Brad Christie

他说他已经将对象保存在一个名为 teamJSON 的变量中。没有任何时候提到字符串。 - Phil

@Phil：如果它是JSON，那么它就是一个字符串。如果不是，那么它就不是JSON。 - user2736012

转义引号让我想知道这个 JSON 是否被编码了两次。 - user2736012

保罗，你的回答很有建设性。它解决了问题陈述中的缺陷，没有贬低原帖发布者。它更清晰地界定了在操作javascript对象和这些对象的JSON文本表示之间的边界。我认为理解一旦JSON被解析后，我们就在操作纯的javascript对象——它们最初来自JSON的事实是无关紧要的。总之，在所有贬低原帖发布者让其感觉像个白痴的恶意评论之后，阅读你的回答是一股清新的空气。 - Larry Hector

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

以上代码块在第二个元素后添加了一个元素。

- Ajay Gupta

Answer 3

首先，我们需要解析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 格式。

- Abhijit

---

如果我们的JSON没有像theTeam这样的名称，而是只包含具有teamId和status元素的节点，那该怎么办呢？所以我的代码看起来像这样：var str = '[{"teamId":"1","status":"pending"}, {"teamId":"2","status":"member"},{"teamId":"3","status":"member"}]'; - Shafique

Shafique：那就更简单了。只需在 obj 后面删除 ['theTeam'] 部分即可。所以：obj.push(...) - ultrageek

Answer 4

在我的情况下，我的JSON对象中没有任何现有的数组，所以我必须先创建数组元素，然后再将元素推入其中。

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

（这个回答可能与这个特定问题无关，但可能有助于其他人）

（这个回答可能对这个具体问题不相关，但或许能帮助其他人）

- ajitspyd

Answer 5

使用扩展运算符

    array1 = [ 
    {
                "column": "Level",
                "valueOperator": "=",
                "value": "Organization"
            } 
    ];
        

array2 = [
{
                "column": "Level",
                "valueOperator": "=",
                "value": "Division"
            } 
            ];
    array3 = [
    {
                "column": "Level",
                "operator": "=",
                "value": "Country"
            }
            ];
            console.log(array1.push(...array2,...array3));

- rahulnikhare

Answer 6

例如，这里有一个像按钮一样的元素，用于将物品添加到购物篮中，并适当地使用属性保存在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 对象添加到数组后的结果是（在 LocalStorage 中）：

[{"id":"99","nameEn":"产品名称1","price":"767","image":"1462012597217.jpeg"},{"id":"93","nameEn":"产品名称2","price":"76","image":"1461449637106.jpeg"},{"id":"94","nameEn":"产品名称3","price":"87","image":"1461449679506.jpeg"}]

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

完整的代码示例在这里

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

- Musa