Can't work out how to handle my lovely API data

I am stuck on the weather api call (pen https://codepen.io/m4sterbunny/pen/OZGQKy)

I can output the first-level data such as count (throwing that to html fine)- I have been fiddling to see what I can throw to console log with this:

console.log(data.list);

I can throw the entire data set, but drilling down is a problem.
List is as deep as I can go- in this Object . If I attempt to pull a property I fail. If I attempt to treat it like an array and pull based on position I fail (this is actually an object — right?).

Any hints how to drill down and grab data from the list section of this object?

I have tried data.name and data.list.name

list is an array of one element which is an object.

If you can not remember how to reference nested object properties, you might need to review the following challenges:

Accessing Nested Objects

Accessing Nested Arrays

Ah @RandellDawson if only it were that simple! My limited understanding thus far makes me expect that I could get the same result from :
console.log(myStorage.car.inside[“glove box”]); // returns “maps”
console.log(myStorage.car.inside[0]); // returns undefined

Thus breaking all my assumptions

var myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    } } };


So imagine my surprise when I finally (in the manner of the 1000 monkeys recreating Shakespeare)
grab my location successfully by referring the index of a nested object/array thingie:

var data =
  {"message":"accurate","cod":"200","count":1,"list":[{
    "id":3362324,"name":"Roggebaai","coord":{
       "lat":-33.9167,"lon":18.4333},
     "main":{
       "temp":289.15,"pressure":1018,"humidity":93,"temp_min":289.15,"temp_max":289.15},
             "dt":1527143400,"wind":{
            "speed":3.6,"deg":360},
              "sys":{
                 "country":""},
                  "rain":null,"snow":null,"clouds":{
                              "all":75},
                      "weather":
     [      {"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}
     ]}]}           

console.log(data.list["id"]); // undefined
console.log(data.list.id); // undefined
console.log(data.list[0]); // returns array within list
console.log(data.list[0]["name"]); // returns location name

I will take it and use it, but I don’t understand it.

Let me display the JSON a little different. Also, see your four console.log statements with modified comments along with one extra which I created.

JSON

var data = {
    "message": "accurate",
    "cod": "200",
    "count": 1,
    "list": [{
        "id": 3362324,
        "name": "Roggebaai",
        "coord": {
            "lat": -33.9167,
            "lon": 18.4333
        },
        "main": {
            "temp": 289.15,
            "pressure": 1018,
            "humidity": 93,
            "temp_min": 289.15,
            "temp_max": 289.15
        },
        "dt": 1527143400,
        "wind": {
            "speed": 3.6,
            "deg": 360
        },
        "sys": {
            "country": ""
        },
        "rain": null,
        "snow": null,
        "clouds": {
            "all": 75
        },
        "weather": [{
            "id": 803,
            "main": "Clouds",
            "description": "broken clouds",
            "icon": "04d"
        }]
    }]
}

Console.log statements:

console.log(data.list["id"]); // displays undefined because list is an array which has indices (zero to array length - 1)
console.log(data.list.id); // displays the same value as the previous line (same reason too)
console.log(data.list[0]); // displays the first element (an object) of list (an array)
console.log(data.list[0]["name"]); // displays the name property's value of list's first element (an object)
console.log(data.list[0].name); // displays the same value as the previous line (same reason too)

Ah- I was seeing “id” as lists first element. But you are pointing out that the first element is an array- which I can dip into using the property(?) id such as “id”, “name”

Do you have a tool you used to present the nested object/array as you did - OR did you diy? Also is there a method to describe the hierarchy of nests within the JSON object?

I have good look with http://jsbeautifier.org

I am not exactly sure what you are asking.

So you get a JSON object back from an API request and it could be anything- with any kind of structure.
(You have used beautifier to make it easier to read= awesome, will check it out)

Is there a simple way to summarise the structure of the object?

  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    } } };

This object has 2 inner arrays, with 2 items in first array, 1 item in second array
Something like 1>2 (2,1)

i.e. a tool to provide a summary of the object which describes its hierarchies

[excuse my poor use of terms, hard to learn a lexicon when you don’t speak it out loud]

or is it a case of building a function to do so that would (currently) melt my overheated brain?

I would summarize the following JSON as an object which contains one property named “car” which contains an object with two properties (“inside” and “outside”). inside contains an object with two properties (“glove box” and “maps”, respectively) and outside contains one object with a single property named “trunk”. There are no arrays shown in the JSON.

{
    "car": {
        "inside": {
            "glove box": "maps",
            "passenger seat": "crumbs"
        },
        "outside": {
            "trunk": "jack"
        }
    }
}

I am not aware of such a tool, but one may exist. You just learn to dissect the JSON into the various nested properties/objects/arrays.

ok- thanks

will attempt to:

  1. apply the proper terms and
  2. dissect the JSON

!

OK folks- don’t follow the path of crazy. Instead take a look at dev tools and you will get to see your Array all laid out, in a lovely hierarchical structure. Just what the dr ordered!