类型错误：data.map 不是函数答案

【问题标题】：TypeError: data.map is not a function类型错误：data.map 不是函数
【发布时间】：2019-02-14 07:51:27
【问题描述】：

我真的很想弄清楚我错过了什么，我不是 javascript 专家，如果有人能告诉我我做错了什么，我真的很感激。

我有一个工作代码：

if (value_ == "group") {
  fetch("http://localhost/someapi"+value_).then(r => { return r.json()})
  .then(json => {
      var data =  `{ "group" : [{"name":"foo","tag":"bar"},{"name":"bool","tag":"lean"}] }`;
      var data = JSON.parse(data); 
      var groupName = data.group.map(current => current.name);
      var groupTag = data.group.map(current => current.tag);
      console.log(data);         
      console.log(`json: ${data.group[0].name}`);
    });
}

上面的代码可以工作并得到我想要的每一个数据，但是 json 来自：

var data =  `{ "group" : [{"name":"foo","tag":"bar"},{"name":"bool","tag":"lean"}] }`;

然后我尝试从返回与上面的 var 数据相同的值的 URL 获取 json。但它不起作用。

我确实将 var data = JSON.parse(data); 更改为 data = JSON.parse(json)

并删除“var data = { "group" : [{"name":"foo","tag":"bar"},{"name":"bool","tag":"lean"}] };”

它确实给出了一个错误：(node:10868) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected end of JSON input

我也试过这个代码：

  fetch("http://localhost/someapi"+value_).then(r => { return r.json()})
  .then(json => {
      parseJSON(JSON.stringify(json));
      function parseJSON(str){
        var data = JSON.parse(str); 
        var groupName = data.group.map(current => current.name);
        var groupTag = data.group.map(current => current.tag);
        console.log(data);         
        console.log(`json: ${data.group[0].name}`);
      }

    });
}

这给了我错误：(node:12668) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'map' of undefined。

谢谢并原谅我的英语。

【问题讨论】：

有没有理由让你在做JSON.stringify 然后立即在结果上做JSON.parse？为什么不直接说var data = json;？
我不确定，但我确实使用它来使我的其他代码工作，但它是不同的代码环境。如果在我的其他代码中，如果我直接使用var data = json;，它将给我TypeError: Cannot read property '0' of undefined，我不像我说的那样专家，所以我只是弄清楚这里发生了什么并学习修复它。
当您传递data 变量时，您的解析方法工作正常。我预计问题出在json 变量的内容中。你记录了它的内容吗？
我的 api url 上的 json 内容与var = data 中的内容完全相同，如果这就是您所要求的。
要弄清楚您的提取结果发生了什么，您可能需要查看为响应您的提取而发送的实际文本。在开发者工具网络窗格中，或者暂时将r.json() 更改为r.text() 然后console.log 它。

标签： javascript json node.js node-fetch

【解决方案1】：

您不需要手动执行 JSON.parse，因为您的示例第三行中 json 变量的内容已经是一个对象。

试试这个：

fetch("http://localhost/someapi"+value_)
.then(r => r.json())
.then(json => {
  var groupName = json.group.map(current => current.name);
  var groupTag = json.group.map(current => current.tag);
  console.log('groupName', groupName);         
  console.log('groupTag', groupTag);         
});

【讨论】：

只需要输入var data = json;，它现在就可以工作了。所以基本上，如果直接来自fetch("url").then(r=>{ return response.json()}).then json => { .... }，我不需要手动使用解析？
我在回答中写的几乎一样。您不需要额外的 data 变量。只需使用json 变量，然后您会收到then 回调。
响应中的 JSON 字符串由 .then(r=>{ return response.json()}) 解析。此外，您可以在此处删除多余的括号和 return 语句。只需.then(r => r.json()) 就足够了。
是的，但之前在您的代码上是 data.group.map。不过已经无所谓了。我从你的解释中明白了这一点。再次感谢！
你是对的。我在提交答案后才注意到错误。