logic to pick element randomly from array nested in object which is further nested in array

Question

I am trying to create a logic for quote app. There is an array that has objects as elements, further that object that has two keys, quotes and author. Now I want when a button (New Quote) clicked, it selects a random quote from quotesArray with his author.

I am facing two problems here,

Problem 1: I am unable to select a random element from quotes key that nested inside an object.

Problem 2: It selects an author randomly not from that same object that has quotes array.

I hope I am clear.

Here are my codes.

HTML code:

<div class="quote-app">
  <div class="quote">Quote</div>
  <div class="author">Author</div>
  <button class="new-quote">New Quote</button>
</div>

My JS code:

let quote = document.querySelector(".quote"),
    author = document.querySelector(".author"),
    newQuote = document.querySelector(".new-quote");

let quotesArray = [
{
    author: "Author1",
    quotes: ["a", "b", "c", "d", "e"]
},
{
    author: "Author2",
    quotes: ["f", "g", "h"]
},
{
    author: "Author3",
    quotes: ["i", "j"]
},
{
    author: "Author4",
    quotes: ["k", "l", "m", "n"]
}
];

newQuote.addEventListener("click", function(){

quote.innerHTML = quotesArray[Math.floor(Math.random() * 
quotesArray.length)].quotes[Math.floor(Math.random() * quotes.length)];

author.innerHTML = quotesArray[Math.floor(Math.random() * 
quotesArray.length)].author;
});

when I write (Math.random() * 3) instead of quotes.length, it works fine but I want to select the element from quotes.length not the particular length.

I will be if someone can sort out my problem.

Neil Locketz · Accepted Answer · 2018-07-21 16:44:08Z

2

var selectedQuotes = quotesArray[Math.floor(Math.random() * quotesArray.length)];
quote.innerHTML = 
    selectedQuotes.quotes[Math.floor(Math.random() * selectedQuotes.quotes.length)];

// Before you could choose an author from a different quote. This fixes that.
author.innerHTML = selectedQuotes.author;

That should work. Problem seems to be that you don't have quotes. We solve this by storing the selected array before choosing.

answered Jul 21, 2018 at 16:44

Neil Locketz

4,3681 gold badge25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Basit Over a year ago

its not working, shows undefined. selectedQuotes.length will not work here. I want select the element from quotes.length.

Anshul Bansal · Accepted Answer · 2018-07-21 16:49:38Z

0

    let quotesArray = [{
        author: "Author1",
        quotes: ["a", "b", "c", "d", "e"]
    },
    {
        author: "Author2",
        quotes: ["f", "g", "h"]
    },
    {
        author: "Author3",
        quotes: ["i", "j"]
    },
    {
        author: "Author4",
        quotes: ["k", "l", "m", "n"]
    }];

function randomElementFromArray(inputArray){
  return inputArray[Math.floor(Math.random()*inputArray.length)];
}

    var selectedItem = randomElementFromArray(quotesArray);    
    author.innerHTML = selectedItem.author;

    var selectedQuotesArray = selectedItem.quotes;

    quote.innerHTML = randomElementFromArray(selectedQuotesArray);

answered Jul 21, 2018 at 16:49

Anshul Bansal

1,8831 gold badge14 silver badges13 bronze badges

Collectives™ on Stack Overflow

logic to pick element randomly from array nested in object which is further nested in array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related