Undefined Random Quote Generator

Here’s the link to my code: https://codepen.io/Smokahontas/full/wmxBOo/

It works fine except sometimes I get undefined(quote) and undefined(author).
I realize that it might be due to that particular quote&author not existing in the array/object but I can’t seem to figure out how to solve it. Help.
Thanks in Advance :slight_smile:

If you add a console.log() with the object data after it is fetched, it appears there is an empty object in there, so it’s not on your end, that’s really one of the elements in your array.

If you add a check when picking, to make sure it’s not undefined, and just pick again if it is I guess that would work, though I’d probably just filter the undefined elements out of the array right away and leave the random pick as is. Either way, seems like a quick fix and you’re there!

1 Like

Thanks. Any idea why would I get an empty object on my array from my code?

Also, did I do the right thing by saving all the json data in an array(you can see from my comments that I saved the json data in my array so that I don’t fetch it again and again while clicking new quote)? I’m new to this, so that’s my thought.

1 Like

If you look at the objects in the JSON, it looks like object 32 is undefined on their end. You could make an exception maybe so that if 32 is randomly picked, it could just pick a quote you preselect or put in yourself.

1 Like

It is not your code, it is the API you are using. It appears the 33rd element in the array is an empty object { }. You can either do as @mathic suggests to deal with this issue or you can check for the empty object inside your forEach callback function and just not push the empty object into arrObject.

1 Like

Yep, as already mentioned, your array has the undefined object because the API call returns an empty object with all the other quote objects. The problem is entirely on the herokuapp side, so there is nothing you can do to prevent this from being fetched. If you are calling all of their quotes you will get their empty one and just have to handle how to not use it on your code randomly selecting one from the bunch. (Even if you called only one at a time, you could still get the empty one once in awhile, so neither way will get around this issue.)

As to your ‘did I do the right thing’ question, there is no ‘right’ thing! I like your idea of fetching all the data at once and then doing all future choosing on your end because it reduces the load you’re putting on the (freely available, but costing the maker money if it is used too much) herokuapp. However, you could argue that fetching only one at a time reduces the amount of space you need, so is better in that sense. They both have their benefits, but either way is good.

1 Like

Thank you so much! :slight_smile:

Thanks a lot :smile:

Thanks! I understood it well now! :slight_smile:
By the way, I have checked others code and have seen them using some other means of fetching data using ajax from forismatic and some. Am I fine with doing my style, where I fetch data directly from a site, or should I try those ajax methods too?

Hi, I did this to handle empty object. Is it ok code wise?

if (val) {
} else {
   //do nothing

Yep! Again, both ways may have their own benefits, but as long as it works, that’s the important part!

1 Like

Not quite, since your empty object is {} and not undefined. If you change your if to either checking for the empty object (val !== {}) or just if the author (or quote) is undefined (val.author instead of just val) then you should be good.

On a more general note, you should get into the habit of using more descriptive variable names. Just in that small if statement you’ve got ‘arrObject’ and ‘val’. This is fine for a small example like this, but imagine you’re doing a bigger project with hundreds of lines of code and 10 or 20 different arrays as well as many variables. You definitely don’t want to be using arrObject, arrObject1, arrObject2, etc… because that’s very easy to mix up when coding, and very hard for anyone else to work out when reading your code.

Instead, for this example, you could use something like quoteObjects or quotes. This way, when you’ve got many different arrays it’s perfectly clear which one is which, for both you when writing the code, and everyone that may have to look through it later. (Just for reference, my React dungeon crawler was around 1000 lines of code, so this really does become useful!)

1 Like

Thanks a lot, man! :star_struck: