导入JSON数据后调用map()报TypeError，如何正确处理？

data.json 示例数据 #

[
  {"id": 23, "name": "Good!", "state": "OK"},
  {"id": 24, "name": "Not good...", "state": "Fail"},
  {"id": 26, "name": "Oh...", "state": "OK"},
  {"id": 27, "name": "What?", "state": "Fail"}
]

处理数据的脚本 #

import * as data from './data.json'

let jsonData = data
console.log(jsonData)

jsonData = jsonData.map(({name, state}) => ({name, state}))
console.log(jsonData)

执行报错输出 #

{default: Array(4)}
default
:
(4) [{...}, {...}, {...}, {...}]
0
:
(3) {id: 23, name: "Good!", state: "OK"}
1
:
(3) {id: 24, name: "Not good...", state:...}
2
:
(3) {id: 26, name: "Oh...", state: "OK"}
3
:
(3) {id: 27, name: "What?", state: "Fail...}
TypeError: jsonData.map is not a function
    at <anonymous>:35:21
    at dn (<anonymous>:16:5449)

问题 #

首次console.log输出的内容看似可迭代，但为何会抛出TypeError？曾尝试使用let jsonData = JSON.parse(JSON.stringify(data))等方法但均无效，请问如何解析文件中的数据以使其能正常使用map()方法？

原因解析 #

使用import * as data导入JSON文件时，得到的并不是直接的数组，而是一个模块对象。这个对象的default属性才指向JSON文件里的数组。直接对模块对象调用map方法自然会报错，因为普通对象没有map方法。

至于JSON.parse(JSON.stringify(data))无效的原因：这个操作只是把模块对象转成字符串再解析成新对象，得到的依然是包含default属性的对象，不是数组，所以还是无法调用map。

解决方法 #

有两种简单的方式可以解决：

方式一：直接导入默认导出的数组 #

修改导入语句，直接获取JSON文件的默认导出：

import data from './data.json'

let jsonData = data
jsonData = jsonData.map(({name, state}) => ({name, state}))
console.log(jsonData)

方式二：从模块对象中取出default属性 #

如果必须保留import * as data的写法，直接访问模块对象的default属性拿到数组：

import * as data from './data.json'

let jsonData = data.default
jsonData = jsonData.map(({name, state}) => ({name, state}))
console.log(jsonData)

内容的提问来源于stack exchange，提问作者AbreQueVoy