Question

我这里有JSON数据。我想添加一个新的属性，这是一个数组。请看下面的内容：

var datList = [];
var data = {
  id: '1',
  name: 'mike'
};
data = JSON.parse(JSON.stringify(data));
var arr = [{prop1: '1', prop2: '2'}, {prop1: 'one', prop2: 'two'}];

data.new_arr = arr;

datList.push(data);
console.log(datList);

这给了我这个：

{
     id:'1',
     name: 'mike'
     new_arr: [[Object], [Object]]
}

所需的JSON数据

 [{
     id:'1',
     name: 'mike',
     new_arr: [{prop1: '1', prop2: '2'}, {prop1: 'one', prop2: 'two'}]
 }]

Answer 1

你的代码产生了你所说的你想要的结构，这里的主要问题是你在解释控制台输出时遇到了麻烦，这很公平 - 网络控制台可能需要一些时间来习惯，有时候会显示东西以一种不太有用的方式。（其次，JSON在你的代码中是无关紧要的。你只是处理JavaScript对象[除了非常临时在一行上没有用处]。并且你引用的输出必须来自你的代码的早期版本。）< / p>

控制台输出

你说过：

这给了我这个：

{
     id:'1',
     name: 'mike'
     new_arr: [[Object], [Object]]
}

这就是你正在使用的控制台向你展示的方式;据推测，[Object]中的每一个都可以用鼠标扩展。另外，我认为该引用来自您的代码的早期版本，因为它缺少外部数组，但您的代码清楚地显示您记录datList，而不是data。

不同的Web控制台表现不同，其中一些甚至表现不同，具体取决于您是否在控制台关闭时记录某些内容然后打开它或在控制台打开时记录它。为了使事情更加混乱，当您记录对象时，对于大多数控制台，控制台都有一个引用到对象，并且只显示其顶级结构，其中包含>或类似的它是为了扩展它，当你展开它时，它会向你显示新信息，因为它是然后（当你展开它时），而不是原来的。

但是你的代码产生了你想说的结构。我们来看看它：

在Chrome中打开控制台运行您的代码段，这是我最初得到的内容（没有扩展）：

如果我点击指示的>旁边的[Object]，我就明白了：

这称为“扩展”对象树的那部分。

如果我然后展开指示的[Object]，我明白了：

然后展开指定的new_arr：

然后是每个对象：

如果我们稍微修改您的代码段，那么它会输出由JSON.stringify(datList)生成的JSON：

var datList = [];
var data = {
  id: '1',
  name: 'mike'
};
data = JSON.parse(JSON.stringify(data));
var arr = [{prop1: '1', prop2: '2'}, {prop1: 'one', prop2: 'two'}];

data.new_arr = arr;

datList.push(data);
console.log(   JSON.stringify(datList, null, 2));
// Only change ^^^^^^^^^^^^^^^       ^^^^^^^^^^

我们得到：

[
  {
    "id": "1",
    "name": "mike",
    "new_arr": [
      {
        "prop1": "1",
        "prop2": "2"
      },
      {
        "prop1": "one",
        "prop2": "two"
      }
    ]
  }
]

......这正是你所说的你想要的结构。

JSON

代码中的任何地方都没有JSON，除非在此行中暂时显示：

data = JSON.parse(JSON.stringify(data));

它接受现有的JavaScript对象，为其创建JSON，然后解析该JSON，并将新的，等效的JavaScript对象分配给data。在该代码中它完全没有用处。

在上面的代码片段中，我最后使用JSON 纯粹以相当清晰简洁的方式显示datList的结构。

这是一个稍微修改过的代码版本，根本没有JSON，这表明你已经成功创建了你想要的结构：

var datList = [];
var data = {
  id: '1',
  name: 'mike'
};
var arr = [{prop1: '1', prop2: '2'}, {prop1: 'one', prop2: 'two'}];

data.new_arr = arr;

datList.push(data);

snippet.log(datList.length);               // 1
snippet.log(datList[0].id);                // 1
snippet.log(datList[0].name);              // mike
snippet.log(datList[0].new_arr[1].prop1);  // one

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 2

我只是在控制台中运行您的代码，同时尝试找到问题的解决方案并创建此代码段。

// the data you have
var data = {
  id: '1',
  name: 'mike'
}
// the data you'd like to add to your JSON
var arr_to_add = [{ prop1: '1', prop2: '2' }, { prop1: 'one', prop2: 'two' }]

// parse the raw data (without the array added)
var data_as_json = JSON.stringify(data);

// write a line to show how the original JSON looks
document.write(data_as_json + "<br />");

// convert the parsed JSON back to a JS object
var data_parsed = JSON.parse(data_as_json);

// add the array (can also be done via dot notation: data_parsed.new_arr = arr_to_add)
data_parsed['new_arr'] = arr_to_add;

// convert the parsed_data with the array back to JSON
var final_data = JSON.stringify(data_parsed);

// convert the parsed_data with the array added and itself wrapped in an array
var final_data_2 = JSON.stringify([data_parsed]);

// show the new json
document.write(final_data + "<br />");

// show the new wrapped JSON
document.write(final_data_2);

我认为您忘记在最终结果上使用JSON.stringify（在我的情况下为final_data） - 我不确定，因为我在这里没有看到整个代码。

JSON.stringify需要将JS数据结构（无论它们可能是多么嵌套）转换回JSON。

编辑05-01-2016

根据您的评论（@OP）您需要做的就是将所需的整个对象包装在数组文字中（[]）

我编辑了以上代码段以反映此行为，基本上在我的示例中 - data_parsed是您的对象，而final_data只是在其上调用JSON.stringify。

您似乎想要做的就是将此对象包装在一个数组中，通过将输入更改为JSON.stringify可以非常简单地实现。

我的示例中的以下两行显示差异。

var final_data = JSON.stringify(data_parsed);
var final_data_2 = JSON.stringify([data_parsed]);

现在这里有两个不同的东西，第一个是变量名称，但这只是用于片段目的。

第二件不同的是传递给JSON.stringify的论据。

JSON.stringify(data_parsed);

更改为

JSON.stringify([data_parsed]);

请记住，在使用JS和JSON并且将JS对象或数组转换为JSON时，您所做的就是接收JS并将其输出为具有特定格式的字符串。这种格式显然反映了你的结构，所以如果你改变你的结构就改变了JSON - 这就是它的全部内容。

如果你打算在这个JSON数组中附加更多的对象，那么在<{em> JSON.stringify调用之前执行，因为那就是将JS转换为JSON字符串。

如何将数组的新属性添加到现有的json数据中

2 个答案:

控制台输出

JSON

编辑05-01-2016