将 json 转换为数组/映射

Question

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

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

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

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

之所以有效，是因为内容已显示，但在 Web 浏览器的控制台上，我可以看到错误：

地图不是函数

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

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 is not a function
• Array(...).map：数组或迭代器中的每个子元素都应该有一个唯一的键。

Answer 1

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

Answer 2

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

一个更优雅的方式来做到这一点：

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

Answer 3

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

Answer 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 始终是 STRING 。 所以如果你的 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 索引下有对象的键

Answer 5

您可以复制粘贴此函数：它将采用 JSON 并返回一个 Map of Maps：

它适用于这个 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;
}