The code so far:
We have now one big Object, containing all the entries for each type in the API. We can see this if
we use the console command console.dir(data) within the writeToDocument() function:
(The button just calls /people/ as it is set as onclick="writeToDocument('people') for the purpose of this example.
But any of the buttons below would work if we left console.dir(data) inside the writeToDocument() function.)
We can see now in the console that an Object has been called, and if we click the arrow to open the results of that Object in
the console, we can see a list of the main characters of Star Wars.
To display thse results as an Object in the browser, we add .results to the fourth line of the above code block:
We can also verify in console that each Object is the one we are looking for (people, planets etc.).
But we still need to unpack these results further to get to the contents of each [array].
we change the code within writeToDocument() a litle more to do this:
1: Delete console.dir() as we don't need it.
2: Overwrite data with data.results so when writeToDocument() is called,
it gets the results of the Object.
3: Create a forEach loop so that writeToDocument() will loops through each item
of the Object
4: Move this line of code into the loop.
5: Change what will be displayed in the browser with the item.
6: Console.log the result for item. Open console!
with console open, we can now see each item being logged, but we still only get its containing Object
in the browser.
We need to look for item.name within the loop
Now we can see an individual name listed, but it is the last name of the list of names when you check in the console. And also,
button "films" is returning "undefined". When you check in console, you can see that there is no entry name in the films
[array]. We will access the films in Part 3.
Let's once again change the code to get all the entry items and add <p> tags to make the items
appear in a list:
But now when we click more than one button, we concatenate the list. So lets now change this: