难以访问 api 返回的 json 数组中的信息。 我究竟做错了什么？

Question

I am trying to get information out of a json response from the weather.gov api ( https://api.weather.gov/ ). There's a good chance that I'm overthinking my problem, because I am getting the expected number of responses, but all 2,748 of those responses are 'undefined'.

I've tried accessing the properties that I have seen in the json object response via dot notation, I have tried.map and.forEach methods to possibly try to get a different output, and I have read several dozen blog posts that seem to deal with "simpler" api's. I have also read several posts here on SO, but I have not been able to understand what's wrong.

I'm pretty sure at this point that my mistake is small, but I can't see it.

const endpoint = 'https://api.weather.gov/stations/';

async function getStations() {
    const response = await fetch(endpoint);
    const data = await response.json();

    stationInfo = data.observationStations;
    // data.observationStations.forEach(function(e) {
    //     console.log(e.properties);
    // });

    for(let i in stationInfo) {
        // ext = stationInfo[i].slice(-4);
        // console.log(endpoint + ext);
        console.log(stationInfo[i].id)
    }
}

getStations();

here is an example of the json that I'm trying to work with

{
    "@context": [
        "https://raw.githubusercontent.com/geojson/geojson-ld/master/contexts/geojson-base.jsonld",
        {
            "wx": "https://api.weather.gov/ontology#",
            "s": "https://schema.org/",
            "geo": "http://www.opengis.net/ont/geosparql#",
            "unit": "http://codes.wmo.int/common/unit/",
            "@vocab": "https://api.weather.gov/ontology#",
            "geometry": {
                "@id": "s:GeoCoordinates",
                "@type": "geo:wktLiteral"
            },
            "city": "s:addressLocality",
            "state": "s:addressRegion",
            "distance": {
                "@id": "s:Distance",
                "@type": "s:QuantitativeValue"
            },
            "bearing": {
                "@type": "s:QuantitativeValue"
            },
            "value": {
                "@id": "s:value"
            },
            "unitCode": {
                "@id": "s:unitCode",
                "@type": "@id"
            },
            "forecastOffice": {
                "@type": "@id"
            },
            "forecastGridData": {
                "@type": "@id"
            },
            "publicZone": {
                "@type": "@id"
            },
            "county": {
                "@type": "@id"
            }
        }
    ],
    "id": "https://api.weather.gov/stations/KVBS",
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [
            -93.629999999999995,
            29.48
        ]
    },
    "properties": {
        "@id": "https://api.weather.gov/stations/KVBS",
        "@type": "wx:ObservationStation",
        "elevation": {
            "value": 68.275199999999998,
            "unitCode": "unit:m"
        },
        "stationIdentifier": "KVBS",
        "name": "SABINE 13B OIL PLATFORM",
        "timeZone": "America/Chicago",
        "forecast": "https://api.weather.gov/zones/forecast/GMZ450"
    }
}

Since I was successful in getting the url's for each item in the json array, I expected to be able to access the properties of those items also - instead, I'm getting 'undefined'. However as I said earlier, I'm getting 'undefined' the expected number of times.

Answer 1

Hi you could try something like:

 const endpoint = 'https://api.weather.gov/stations/'; const getStations = async () => { const response = await fetch(endpoint); const data = await response.json(); data.observationStations.forEach(item => console.log(item)); } getStations();

Answer 2

Looping the observationStations you just need a simple forEach

 const endpoint = 'https://api.weather.gov/stations/'; const getStations = async () => { const response = await fetch(endpoint); const data = await response.json(); data.observationStations.forEach(station => console.log(station) ) } getStations();

HOWEVER You likely want to access the features object array:

 const endpoint = 'https://api.weather.gov/stations/'; const getStations = async() => { const response = await fetch(endpoint); const data = await response.json(); const list = data.features.map(feat => `<dt>${feat.properties.stationIdentifier}</dt> <dd><a href="${feat.id}">${feat.properties.name}</a></dd>` ) document.getElementById('list').innerHTML = list.join(''); } getStations();

 a { text-decoration: none } dl { border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width: 70px; /* text-align: right; */ font-family: monospace; font-size: 16px; white-space: pre; font-weight: bold; color: green; } dt::after { content: ":"; } dd { margin: 0 0 0 50px; padding: 0 0 0.1em 0; }

 <dl id="list"></dl>

Answer 3

the point is that observationStations attribute object obtained from https://api.weather.gov/stations/ is an array of strings not objects.

Therefore to print the string you should do:

console.log(stationInfo[i])

instead of:

console.log(stationInfo[i].id)

Hope it helps

Answer 4

If you want to access observationStations :

 const endpoint = 'https://api.weather.gov/stations/'; async function getStations() { console.log('calling'); const data = await fetch(endpoint).then(res => res.json()); const observationStations = data.observationStations; observationStations.forEach(observationStation => console.log(observationStation)); } getStations();

But just an NB I don't think you should make this kind of calls ( retrieving all the stations at once). Maybe there is a much better call which takes much less time from the API.