TypeError: data.map is not a function

Question

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.

Solution

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

Comments

[David784]

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;?

[Poporingus]

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.

[Thijs]

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?

[Poporingus]

the content of the json on my api url is exactly same like in the var = data if thats what you're asking for.

[David784]

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.

[Poporingus]

just need to put the var data = json; and it is work now.. so basically, I dont need to use a parse manually if its direcly from the fetch("url").then(r=>{ return response.json()}).then json => { .... } ?

[Oleksandr Kovpashko]

I wrote almost the same in my answer. You don't need additional data variable. Just use json variable then you receive in then callback.

[Oleksandr Kovpashko]

The JSON string from the response is parsed by .then(r=>{ return response.json()}). Also, you can drop redundant brackets and return statement there. Just .then(r => r.json()) will be enough.

[Poporingus]

Yea, but before it was data.group.map on your code before. But doesn't matter anymore. I get the point from what you explained. Thanks again !

[Oleksandr Kovpashko]

You're right. I noticed the error only after submitting my answer.

[Oleksandr Kovpashko]

If everything works and you question if solved I'd appreciate if you mark my answer as the best answer.