将 json 转换为数组/映射答案

【问题标题】：convert json to array/map将 json 转换为数组/映射
【发布时间】：2017-06-01 20:24:48
【问题描述】：

我的 rest API 返回以下 json 内容：

[{
    "key": "apple",
    "value": "green"
},
{
    "key": "banana",
    "value": "yellow"
}]

我正在使用此代码遍历列表：

this.props.json.map(row => {
    return <RowRender key={id.row} row={row} />
}

它可以工作，因为内容已显示，但在网络浏览器的控制台上我可以看到一个错误：

地图不是函数

我用谷歌搜索了它，并将我的代码更改为：

Array.prototype.slice.call(this.props.json).map(row => {
    return <RowRender key={id.row} row={row} />
}

它可以正常工作，但看起来很复杂。这是完成这项工作的正确方法吗？

更新

我尝试了什么：

JSON.parse(...).map：JSON 输入意外结束
JSON.parse(JSON.stringify(...)).map(...): 数据已显示，但出现错误：JSON.parse(...).map 不是函数
Array(...).map：数组或迭代器中的每个子元素都应该有一个唯一的键。

【问题讨论】：

究竟是什么 this.props.json...？它是如何创建的？ { ... }, { ... } 既不是有效的 JSON 也不是 Javascript。
您可以使用Array(this.props.json)，而不是使用Array.prototype.slice.call(this.props.json)，但无论如何，您的应用程序似乎有问题。这是您 API 的完整输出吗？
已更新。现在看起来好多了
现在您的 JSON 响应有效，我可以发布解决方案，但问题被保留。
尝试使用JSON.parse(response)，你会得到数组。这是正确的方法。

标签： javascript json ecmascript-6

【解决方案1】：

let myMap = new Map(Object.entries(this.props.json));

【讨论】：

【解决方案2】：

在您的代码中，this.props.json 不是数组，它是一个类似数组的对象，而 map 是一个数组函数。您要解决此问题的方法是将类似数组的对象转换为数组，使用 .slice()

一种更优雅的方法：

Array.from(this.props.json).map(row => <RowRender key={id.row} row={row} />)

【讨论】：

【解决方案3】：

let jsonMap = JSON.stringify([...map.entries()])
let myMap = new Map(JSON.parse(jsonMap));

【讨论】：

请添加解释，突出显示解决 OP 问题的部分答案，以及为什么/如何。仅代码的答案通常在 SO 上不受欢迎。添加细节可以增加长期价值，并帮助未来的访问者学习，因此他们可以将这些知识应用于自己的编码问题。此外，它提高了答案的质量，因此也是如此。更高质量的答案得到更多人的支持，因为更多的用户发现它们作为参考资源的用途更大。考虑编辑以提供更多信息。
序列化然后立即反序列化一个对象是没有意义的。
@ShaneK 每当您处理任何类型的解析器和（漂亮的）打印机时，它都是一个非常好的单元测试。

【解决方案4】：

正如@Gary 在他的回答中提到的那样，您可以很容易地做到这一点：

从Map 到JSON（字符串键）：

const personsJson = `{"1":{"firstName":"Jan","lastName":"Kowalski"},"2":{"firstName":"Justyna","lastName":"Kowalczyk"}}`;
const personsObject = JSON.parse(personsJson);
const personsMap = new Map(Object.entries(personsObject));
for (const key of personsMap.keys()) {
    console.log(typeof key)
}

但是有一个问题你必须小心。以这种方式创建的地图的键将始终是 STRING。它会发生，因为 JSON 对象的 KEY 始终是一个字符串。因此，如果您的 Map 键应该是数字，那么首先您需要解析对象条目的键。

从JSON 到Map（数字键）：：

const personsJson = `{"1":{"firstName":"Jan","lastName":"Kowalski"},"2":{"firstName":"Justyna","lastName":"Kowalczyk"}}`;
const personsObject = JSON.parse(personsJson);
const personObjectEntries = Object.entries(personsObject);
const personObjectEntriesNumberKeys = personObjectEntries.map(person => {
    person[0] = parseInt(person[0]);
    return person;
});
const personsMap = new Map(personObjectEntriesNumberKeys);
for (const key of personsMap.keys()) {
    console.log(typeof key)
}

有person[0]，因为在0索引下有对象的键

【讨论】：

【解决方案5】：

你可以复制粘贴这个函数：它会接受 JSON 并返回一个地图地图：

它适用于这个 JSON：

{
   "data":{
      "1":{
         "color":"red",
         "size":"big"
      },
      "2":{
         "color":"red",
         "size":"big"
      },
      "3":{
         "color":"red",
         "size":"big"
      },
      "4":{
         "color":"red",
         "size":"big"
      },
      "5":{
         "color":"red",
         "size":"big"
      }
   }
}

function jsonToMap(jsonString)  {
    var jsonObject = JSON.parse(jsonString);
    var dataObject = jsonObject.data;
    var dataMap = new Map(Object.entries(dataObject));
    var resultMap = new Map();
    for (const key of dataMap.keys())  {
        console.log(key);
        var keyMap = new Map(Object.entries(dataMap.get(key)));
        resultMap.set(key, keyMap);
    }

    console.log("done!");
    return resultMap;
}

【讨论】：