从JSON数据调用值时使用fetch（）并获取“未定义”

Question

I am able to console.log the JSON response from fetch() and it shows that I am in fact receiving the JSON response from the API URL.

This is the code that will console.log the JSON response without an issue (please note that I've ommited res.render() from this code while I am sorting the JSON issue):

app.get('/', function(req, res, next){
    fetch(url)
    .then(function(res){
        return res.json();
    })
    .then(function(data){
        ico = JSON.stringify(data);
        console.log(ico); // Logs the JSON data without issue
    })
    .catch(function(error){
        console.log(error);
    })
});

This is a snippet of that JSON response from the requested URL:

    {
       "ico": {
          "live": [{
             "name": "ViMarket",
             "image": "https://icowatchlist.com/logos/vimarket.png",
             "description": "A 3D marketplace that allows users to create and share virtual reality VR experiences ViMarket promises to bring about a muchneeded breakthrough in the global ecommerce ecosystem",
             "website_link": "https://api.icowatchlist.com/public/v1/url/vimarket",
             "icowatchlist_url": "https://icowatchlist.com/ico/vimarket",
             "start_time": "2017-12-07 00:00:00",
             "end_time": "2018-01-31 00:00:00",
             "timezone": "UTC+0"
          }, {

         "name": "Pocketinns",
         "image": "https://icowatchlist.com/logos/pocketinns.png",
         "description": "The worlds first decentralized blockchain driven marketplace ecosystem",
         "website_link": "https://api.icowatchlist.com/public/v1/url/pocketinns",
         "icowatchlist_url": "https://icowatchlist.com/ico/pocketinns",
         "start_time": "2018-01-15 10:00:00",
         "end_time": "2018-01-31 10:00:00",
         "timezone": "UTC--3"
      }]}
}

My issue began when I was started having a problem using the JSON data that I passed into an EJS template, so I tried to console.log a key-value pair from the JSON data to see to see if there was an issue with it. This showed me that I was getting an 'undefined' value anytime I wanted to call a key-value pair.

Here is the code snippet that produces that issue:

app.get('/', function(req, res, next){
    fetch(url)
    .then(function(res){
        return res.json();
    })
    .then(function(data){
        let ico = JSON.stringify(data);
        console.log(ico.live.name); // Returns 'undefined'
    })
    .catch(function(error){
        console.log(error);
    })
});

I am confused as to why it will output anything other than 'undefined' when I specifically call a value. I am sure there is something I am not doing correctly.

Here is the full snippet:

app.get('/', function(req, res, next){
        fetch(url)
        .then(function(res){
            return res.json();
        })
        .then(function(data){
            let ico = JSON.stringify(data);
            res.render('pages/index', { ico: ico });
        })
        .catch(function(error){
            console.log(error);
        })
    });

Why can I console.log(ico) and get the entire JSON response without issue, but when I want to console.log(ico.live.name) , I get 'undefined'? From what I can tell from my console.log s, I am passing the entire JSON response into my EJS template, but I am failing to properly access the values in the JSON response from the Javascript in my EJS template.

Answer 1

If you want to use the properties of the object, don't stringify the data.

.then(function(ico){
    //let ico = JSON.stringify(data);
    console.log(ico.live.name); 
    // you can then assign the properties to variables and
    // use them
    let liveName = ico.live.name;
    // or, if you need that as a string, use stringify
    let name = JSON.stringify(ico.name);
});

Answer 2

You're unnecessarily transforming the JSON data to a JavaScript Object and then back to JSON text format again, trying to reference Object properties on it.

The return res.json() already transforms the JSON response to a JavaScript object, so you should remove your JSON.stringify if you want to access that data.

app.get('/', (req, res, next) => {
  fetch(url)
  .then(res => res.json())
  .then(data => res.render('pages/index', { ico: data.ico }))
  .catch(err => {
    console.log(err);
    res.sendStatus(500); // Make sure you close the connection on an error!
  })
});