Question

我能够从{fetch（）获得console.log JSON响应，并且它显示我实际上是从API URL接收JSON响应。

这是console.log JSON响应没有问题的代码（请注意我在排序JSON问题时从此代码中省略了res.render（））：

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

这是来自请求的网址的JSON响应的片段：

    {
       "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"
      }]}
}

当我开始使用我传入EJS模板的JSON数据时出现问题时，我的问题开始了，所以我尝试{J}数据中的console.log键值对来查看是否存在一个问题。这告诉我，我得到了一个未定义的＆＃39;我想随时调用一个键值对。

以下是产生该问题的代码段：

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

我很困惑为什么它会输出除了＆＃39; undefined＆＃39;之外的任何内容。当我特意叫一个值。我确信有些事我做得不对。

以下是完整代码段：

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

为什么我console.log(ico)可以毫无问题地获得整个JSON响应，但是当我想要console.log(ico.live.name)时，我会得到“未定义”＃39 ;?从我的console.log我可以看出，我将整个JSON响应传递到我的EJS模板中，但是我无法从EJS模板中的Javascript正确访问JSON响应中的值。

Answer 1

如果要使用对象的属性，请不要对数据进行字符串化。

.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

您不必要地将JSON数据转换为JavaScript对象，然后再次返回JSON文本格式，尝试在其上引用对象属性。

return res.json()已将JSON响应转换为JavaScript对象，因此如果要访问该数据，则应删除JSON.stringify。

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

使用fetch（）并获取＆＃39; Undefined＆＃39;从JSON数据

2 个答案: