Question

我正在向本地公交车提出API请求。我正在获取所需的JSON对象。但是，当我尝试访问该对象内的stop键时。它说无法读取未定义的属性。但是当我检查对象时，就可以读取它。

错误在addDataToHtml中。我是JS的新手，请让我知道我在这里犯了什么错误。

const apiKey = 'XXXXXXXXXXXXXX';
const query = 'streets.json?name=henlow bay&';
const stops = 'stops.json?street='
let stopsArray;
let promises = [];
const mainDiv = document.querySelector('.main-container')

const stopSchedules = stopKey => {
  return fetch(`${host}stops/${stopKey}/schedule.json?${apiKey}`)
}

const promise = json => {
  json.stops.forEach(e => {
    promises.push(stopSchedules(e.key))
  })
  return promises;
}

const addDataToHtml = jsonData => {
  Promise.all(promise(jsonData))
    .then(response => {
      return stopsArray = response.map( e => e.json())
    })
    .then((response)=> {
      console.log(response);
       response.forEach(e =>{
       console.log(e['stop-schedule'].stop.name);
       })
    })  
}

fetch(`${host}${query}${apiKey}`)
  .then((response) => response.json())
  .then((responseData) => fetch(`${host}${stops}${responseData.streets[0].key}&${apiKey}`))
  .then((stopsRespose) => stopsRespose.json())
  .then((stopsJson) => addDataToHtml(stopsJson))

下面是我要到达的Json对象。

{
  "stop-schedule": {
    "stop": {
      "key": 60433,
      "name": "Northbound Henlow at Fultz",
      "number": 60433,
      "direction": "Northbound",
      "side": "Farside",
      "street": {
        "key": 1717,
        "name": "Henlow Bay",
        "type": "Bay"
      },
      "cross-street": {
        "key": 1400,
        "name": "Fultz Boulevard",
        "type": "Boulevard"
      },
      "centre": {
        "utm": {
          "zone": "14U",
          "x": 630170,
          "y": 5519519
        },
        "geographic": {
          "latitude": "49.81398",
          "longitude": "-97.19061"
        }
      }
    },
    "route-schedules": [
      {
        "route": {
          "key": 94,
          "number": 94,
          "name": "Route 94 Whyte Ridge - Fort Garry",
          "customer-type": "regular",
          "coverage": "regular"
        },
        "scheduled-stops": [
          {
            "key": "11245829-34",
            "cancelled": "false",
            "times": {
              "arrival": {
                "scheduled": "2019-05-20T17:44:10",
                "estimated": "2019-05-20T17:43:15"
              },
              "departure": {
                "scheduled": "2019-05-20T17:44:10",
                "estimated": "2019-05-20T17:43:15"
              }
            },
            "variant": {
              "key": "94-0-H",
              "name": "to Henlow & Scurfield"
            },
            "bus": {
              "key": 211,
              "bike-rack": "false",
              "wifi": "false"
            }
          },
          {
            "key": "11245818-34",
            "cancelled": "false",
            "times": {
              "arrival": {
                "scheduled": "2019-05-20T18:27:10",
                "estimated": "2019-05-20T18:27:10"
              },
              "departure": {
                "scheduled": "2019-05-20T18:27:10",
                "estimated": "2019-05-20T18:27:10"
              }
            },
            "variant": {
              "key": "94-0-H",
              "name": "to Henlow & Scurfield"
            },
            "bus": {
              "key": 211,
              "bike-rack": "false",
              "wifi": "false"
            }
          }
        ]
      }
    ]
  },
  "query-time": "2019-05-20T17:33:44"
}

Answer 1

与Khauri McClain一起，我感觉到问题的一部分是您期望一个JSON值数组。如果只为这些数组值之一包含JSON，那么这不是真正的问题。

我的另一个担心是.map不是JSON解码的完整对象。它可能只在解码第一级，因此“停止”，“路线时间表”等仍然是字符串。

React - how to map nested object values?

如上面的链接所述，您可能需要嵌套.map以获得所有内容。由于您拥有大量嵌套对象，因此您可能希望将此递归操作获取所有内容，而无需手动进行操作。

或者，您只需使用JSON.parse（）即可在单个调用中自动执行此操作。

修改：
您不必在JSON.parse内进行.map，而不必在.map内进行。

Parse JSON in JavaScript?

https://www.w3schools.com/jsref/jsref_parse_json.asp

我是从W3Schools TryIt示例中借用的，但是可以在浏览器的DevTools /控制台中运行它，并进行一些操作：

var obj = JSON.parse('{"firstName":"John", "lastName":"Doe", "nested":{"testing":40}}');

document.getElementById("demo").innerHTML = obj.firstName;
document.getElementById("demo").innerHTML += obj.nested.testing;

这应该输出：

约翰40

只需将整个Json对象推到JSON.parse，然后看看结果如何。我认为它不会处理您得到的对象数组，但请尝试一下。

此外，经过一些测试，您甚至可能根本不需要response.map( e => e.json())，因为response可能已经是Json对象。我尝试.json和JSON.parse已经是Json对象的对象，并且这两个方法都不返回任何结果。您可能做得太多。

在这一点上，我建议对您的变量进行console.log，或者最好将它们分配给window变量，以便您可以在控制台中使用它们进行手动测试：

window.r = response;

当我不知道要处理什么结构时，我会做很多事情。它使我可以处理在代码中应该起作用的事情。当然，并不是所有的ReactJS，JQuery或其他库都可以在DevTools控制台中工作，但是它仍然可以很好地衡量什么是东西。

无法访问对象密钥

1 个答案: