loading...

Discussion on: Dealing with ".json() is not a function" Error

Collapse
simonlegg profile image
Simon

Hey, so to add a bit of clarity as to what’s happening here, when you request the data from that URL the JSON response is structured like a Javascript object (JSON stands for JavaScript Object Notation).

When you use the variable data the format of it from that google books API looks something like this:

{
    "child": "books # volumes",
    "totalItems": 3052,
    "items": [
        {
            "child": "books # volume",
            "id": "-lsujEgnWvsC",
            "floor": "OJYGmROmBGg",
            "selfLink": " https://www.googleapis.com/books/v1/volumes/-lsujEgnWvsC ",
            "volumeInfo": {…},
            "saleInfo": {…},
            "accessInfo": {…},
            "searchInfo": {…},
        },
    ],
}

So where you’re wanting to iterate through the list of books, they’re actually available as the items property in the data object.

Just so that you’re aware, adding .items here only really works because of the way that this API returns data. Does that make sense?

Collapse
mohammedasker profile image
Mohammed Asker Author

Yes, yes, and YES!! That actually makes a lot of sense now. I didn't pay attention to that "items" part other than the one where I want to iterate it.

To make a confession, I still don't understand about array and objects because I have no idea when to use them in a real situation. Usually, I internalized the concepts better when I applied it to my projects.

You, my friend, just helped me to "clicked" the object concept.

Collapse
simonlegg profile image
Simon

Awesome! I‘m glad it helped.

Yeah, I remember when I was starting out, Arrays and Objects (or Hashes as they’re known in Ruby which is what I started with!), were so complicated to me, but you’ll get there!

You’ll probably eventually have the day where you’ll go “Ohhhh! This is exactly what I need an Object for!!”

Essentially they’re both kind of lists of things, an Array is kind of “just a list” and an Object is a list of things but you give the things names instead. That’s how I thought about it at least.

Anyways, good luck on the journey!!!

Thread Thread
mohammedasker profile image
Mohammed Asker Author

Yup, I'll eventually reach the "aha" moment. And when I do, then I'll completely build my foundations in JavaScript.

Collapse
dillionmegida profile image
Dillion Megida

I was going to give a comment similar to Simon's till I saw his.

To add,

Objects can be simply referred to as key:value pairs for variables. They have no order exactly, so accessing the variable values, you'd need the keys.

In the json data in Simon's code, key:value would be

"child": "books # volumes"

where "child" is the key. This is the same method applied for the items such that key "items"'s value is an array which contains many objects.

The concept of array is that it contains ordered values such that the keys are the indexes (starting from 0). You access object values with variable.key while array values are with variable[index].

The forEach method applies your specified function to every value in the array. That's the reason you are able to display all search results.

I hope this helps too.

Thread Thread
mohammedasker profile image
Mohammed Asker Author

I love this explanation too!

If I understand it correctly, the object is nothing more than just storing unordered pairs. Key are usually strings, while values can be literally anything. And to use them, I'll have to add key next to a variable which in my post example happens to be items

Basically, object stores key:value and array store object.

If this is how the object works, then I can say with confidence that I know what object is and when to use them. (At least when working on an API)

Thread Thread
dillionmegida profile image
Dillion Megida

Yes, you're right : )