How do I return a single value from a for loop over an array of objects?

How do I return a single value from a for loop over an array of objects?
0

#1

I currently have a for loop with the var i increasing over the length of the array of objects. Console.logging it returns the entire array of objects, but I just want a random single value. I have got the for loop to return objects in random order, but how do I return just a single value from this? I will appreciate any help or if anyone can lead me to a similar problem on stack overflow that is answered.
here is my relevant code :
function randomQuote(){
if(httpRequest.readyState === XMLHttpRequest.DONE){
if(httpRequest.status === 200){
var data = JSON.parse(this.response);
var randomresponse = data.map(quote => quote.quote);
console.log(randomresponse);
} else {
alert(‘there was a problem with the request’);
}
}
}
and here is my codepen: https://codepen.io/icewizard/pen/xpdpWK


#2
var data = JSON.parse(this.response);

The above line assigns an array of objects to data. If I asked you to console.log the fourth object’s quote, you would write:

console.log(data[3].quote);

I suggest you go back and review the Generate Random Whole Numbers with JavaScript challenge, to refresh your memory how you would create a random array index (a number between 0 and up to an integer less than the array length) and combine that with what I have shown above.

HINT: You do not need a for loop.


#3

Yeah I already knew all of that and was doing it in my code, but thanks anyway I figured it out. And I got rid of my for loop, changed it to a .map, I’m not sure which one is faster though but the code looks cleaner to me and easier to read.
here is my new code if you’re interested: function randomQuote(){
if(httpRequest.readyState === XMLHttpRequest.DONE){
if(httpRequest.status === 200){
var data = JSON.parse(this.response);
var randomresponse = data[Math.floor(Math.random() * data.length) ]
console.log(randomresponse.quote);
} else {
alert(‘there was a problem with the request’);
}
}
}

thanks again!


#4

oops I meant I removed the for loop and .map entirely. Don’t need it here. thanks.


#5

I am glad you got it figured out.

One suggestion is since the API you are using gives you many quotes at once instead of just one single random quote like other APIs used by campers, it would be much more efficient to only download the quotes one time (when the page first loads) and then just reference the created data array throughout your code when you want to display a new quote. That way, anytime you click on the New Quote button, your app does not have to wait for a response each time, because it already has all the quotes.

I refactored your code in about 15 minutes to accomplish this very task. If you end up trying to make this idea work, let me know and I can give you some guidance. I had to rearrange a few things, but it was fairly straight forward.


#7

How exactly did you download the quotes just once and then reference the data? I’m not even sure how to begin to do this. I’ll appreciate it if you could give me some pointers on that.


#8

I created one big function called getAllQuotes with other functions inside it and then called it with

document.addEventListener("DOMContentLoaded", getAllQuotes);

Inside getAllQuotes, I created a function called downloadQuotes which took care of all the checking status and readyState of the XMLHttpRequest which will be created in the main part of the getAllQuotes function. Also, in downloadQuotes, I assign data the JSON data and then call a function called showRandomQuote who’s only purpose is to create a random array index from the data array and then console.log the quote info to the console.

At this point, I have defined two internal functions of getAllQuotes (downloadQuotes and showRandomQuote). Next, the part you wondering about regarding the data array. I first declare the variable data here in the main code of the getAllQuotes function. Then, I make the XMLHttpRequest just as you did before, but I now reference downloadQuotes with the httpRequest.onreadystatechange. The remaining code of the getAllQuotes function involves declaring the “New Quote” button and attaching a click event handler which will call showRandomQuote. Last but not least, I have to call the downloadQuotes to check for the statuses and get the actual data.

That is all there is to it.


#9

thank you!!!