Fatal编程技术网

ReactJS/Javascript:Map函数和JSON

javascript reactjs

ReactJS/Javascript:Map函数和JSON,javascript,reactjs,graphql-js,map-function,Javascript,Reactjs,Graphql Js,Map Function,在控制台中，数据加载了一个我试图呈现的JSON文件（见下文）。来自Chrome的错误消息是，TypeError:data.map不是函数。我没有找到d3.extent函数的好例子，所以我在这里寻求一些帮助。图形组件如下所示： constructor({data=[]}) { console.log('construc data:', data) const times = d3.extent(data.map(action => action.timestamp)) c

在控制台中，数据加载了一个我试图呈现的JSON文件（见下文）。来自Chrome的错误消息是，
TypeError:data.map不是函数。我没有找到d3.extent函数的好例子，所以我在这里寻求一些帮助。图形组件如下所示：


constructor({data=[]}) {
  console.log('construc data:', data)
    const times = d3.extent(data.map(action => action.timestamp))
    const range = [50, 450]
    super({data})
    this.state = {data, times, range}
}


JSON文件：


{data: 
     action: 
        {action: [{action: "Changed", timestamp: 1499348050,…},…]}



不正确的JSON

您的JSON文件无效，因为您的密钥需要用引号括起来。使用以确保具有正确的JSON文件



对
对象调用
.map（）
会导致
类型错误

当从JSON文件加载数据时（并且不会默认为构造函数设置的空数组），请确保数据的形状为
数组
，因为对
对象
而不是
数组
调用
map（）
方法会导致
类型错误
。这是因为
.map（）
是
数组
原型的一部分，需要一个
数组
作为参数

阅读更多关于JavaScript的

阅读更多关于JavaScript的



正确的方法

如果您的JSON正确加载到
数据
对象中，则以下操作应该有效：


d3.extent(data.action.action.map(action => action.timestamp))



您包含的JSON片段不是有效的JSON。那么如何使用d3.extent解析它？我想我需要执行嵌套的d3.extent？如果是这样的话，不要用它来完成。到目前为止，所有联机示例都是平面JSON/array.try
data.action.action.map（action=>…）
map函数在对象上不起作用。与数组关联的映射函数。