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

• 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

1 Answer 1

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