Why isn't an array accepting pushed variables?

Question

I want to create an array of 6 (semi)random trivia category ID numbers received from the jService API. I have my code set up to iterate, pushing a new random category ID into the empty categories array if the ID hasn't already been included.

I have console.logged the variable categories after every iteration for reference. It seems that the ID is being pushed into the array, but then being replaced after every iteration leaving 5 blank array items? I have instead tried creating a nested iteration for the category index number and adding the ID in by doing category[i]=randomCatId , but couldn't get this to work. Shouldn't the push method work fine though? Any help as to why this is happening would be very appreciated. Thanks

let categories = [];

async function getCategoryIds() {
    // save random number from one to 18000 to randomInt
    // randomInt will be used as the "offset" parameter to get a random sequence of categories
    let randomInt = Math.floor((Math.random() * 18000) + 1);
    let res = await axios.get(`http://jservice.io/api/categories?count=100&offset=${randomInt}`);
    // create a loop to iterate until the categories array contains 6 items
    for (i=0;categories.length=6;i++){
        // pull random ID number from the 100 categories pulled from API
        let i= Math.floor((Math.random() * 100) + 1);
        let randomCatId= res.data[i].id;
        console.log("randomCatId =", randomCatId);
        console.log(!categories.includes("randomCatId"));
        // if categories array does not include the randomCatId, add it to the categories array
        if (!categories.includes("randomCatId")){
            categories.push(randomCatId);
        }
        console.log("categories =", categories)
        // categories.push(randomCatId);
    }
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Jeopardy</title>
  <link href="https://fonts.googleapis.com/css?family=Copse&display=swap"
        rel="stylesheet">
  <link rel="stylesheet" href="jeopardy.css">
</head>
<body>

<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="https://unpkg.com/lodash"></script>
<script src="jeopardy.js"></script>

</body>
</html>

You need to check for categories.length === 6 or this for loop will run forever — Edward Romero, Sep 06 '20 at 22:43
I don't know if this is the cause of the problem, but your loop header is... strange. `for (i=0;categories.length=6;i++)` - shouldn't the middle clause be `categories.length < 6`?. In fact I think this should be a `while` loop: `while(categories.length < 6)` — Robin Zigmond, Sep 06 '20 at 22:45
https://stackoverflow.com/questions/8132353/what-is-the-difference-between-and-in-javascript — Roko C. Buljan, Sep 06 '20 at 22:46
@RobinZigmond Yes! this was the issue for the "strange" loop header. Tried the while loop and that worked as well. — personwholikestocode, Sep 06 '20 at 23:04

Edward Romero · Accepted Answer · 2020-09-06T22:50:24.767

3

Your for loop is not properly checking for how to end the loop so it will run forever.

Change your for loop to

for (i=0;categories.length<=6;i++)

edited Sep 06 '20 at 22:50

answered Sep 06 '20 at 22:44

Edward Romero

2,905
1
5
17

Thanks for finding this! So, I made the correction, but now it appears the loop doesn't occur at all? after calling the function in the browser's console, it seems the categories array is empty still – personwholikestocode Sep 06 '20 at 22:48
1

@Bolmstead apologies, fixed the check. Missed that your categories starts at 0. So you want to run the loop while categories length is less than or equal to 6 – Edward Romero Sep 06 '20 at 22:51
1

@Bolmstead it all depends when you want your loop to end. So if you only want 6 items, you’ll need to set it to less than 6 since your iterator starts at 0. Otherwise current example categories will end with 7 items in the array. – Edward Romero Sep 06 '20 at 22:54
Thank you for the help @EdwardRomero. The array now can be filled with 6 items once I run the function! On a separate issue now, the array can now receive duplicate ID numbers. I am currently working on this and may ask another question in stackoverflow if I cant get it – personwholikestocode Sep 06 '20 at 23:03
1

The reason for that is because you’re comparing against the same string always instead of the randomCatId. Check line with if statement with includes. Should be categories.includes(randomCatId). Notice how I removed the double quotes – Edward Romero Sep 06 '20 at 23:08
Of course! great catch. must have copy pasted from my above console.log. Thanks again Edward. – personwholikestocode Sep 06 '20 at 23:15

Why isn't an array accepting pushed variables?

1 Answers1