javascript - TypeError: data.map is not a function - Stack Overflow

admin管理员组

文章数量:1389762

Im really stuck on this figuring out what did I miss, Im not that expert about javascript, if someone can please tell me what I did wrong, I really appreciate.

I have a working code:

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}`);
    });
}

the code above will work and get every data I wanted, but the json is from the:

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

then I tried to get the json from the URL which return the same value as the var data above. But it doesn' work.

which I did change var data = JSON.parse(data); into data = JSON.parse(json)

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

And it does give an error: (node:10868) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected end of JSON input

I also tried this code:

  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}`);
      }

    });
}

this give me error: (node:12668) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'map' of undefined.

Thanks and pardon my english.

Im really stuck on this figuring out what did I miss, Im not that expert about javascript, if someone can please tell me what I did wrong, I really appreciate.

I have a working code:

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}`);
    });
}

the code above will work and get every data I wanted, but the json is from the:

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

then I tried to get the json from the URL which return the same value as the var data above. But it doesn' work.

which I did change var data = JSON.parse(data); into data = JSON.parse(json)

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

And it does give an error: (node:10868) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected end of JSON input

I also tried this code:

  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}`);
      }

    });
}

this give me error: (node:12668) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'map' of undefined.

Thanks and pardon my english.

• javascript
• json
• node.js
• node-fetch

Share Follow edited Sep 9, 2018 at 20:11 Poporingus asked Sep 9, 2018 at 20:06 PoporingusPoporingus 4111 gold badge11 silver badge55 bronze badges 5

• Is there a reason why you're doing JSON.stringify and then immediately doing JSON.parse on the results? why not just say var data = json;? – David784 Commented Sep 9, 2018 at 20:10
• I'm not sure, but I did use that to make my other code work, but it is different environment of code. In case in my other code if I straight use var data = json; it will give me TypeError: Cannot read property '0' of undefined I'm not that expert like I said, so Im just figguring out whats happening here and learn to fix it. – Poporingus Commented Sep 9, 2018 at 20:15
• 1 Your parse method works fine when you pass the data variable. I expect the problem is in the content of the json variable. Did you log its content? – Thijs Commented Sep 9, 2018 at 20:16
• the content of the json on my api url is exactly same like in the var = data if thats what you're asking for. – Poporingus Commented Sep 9, 2018 at 20:17
• to figure out what's going on with your fetch results, you'll probably want to take a look at the actual text being sent in response to your fetch. Either in the developer tools network pane, or by temporarily changing the r.json() to r.text() and then console.log it. – David784 Commented Sep 9, 2018 at 20:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You don't need to execute JSON.parse manually because the content of json variable in the third line of your example is already an object.

Try this:

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);         
});

本文标签： javascriptTypeError datamap is not a functionStack Overflow