Looping through a JSON array to get a Random value (Javascript)

Question

I am trying to loop through my JSON array and get a random value from it.

Here is my Json Code:

{"cities":[{"city":"St.John","xCoor":931,"yCoor":349},{"city":"Halifax","xCoor":844,"yCoor":424},{"city":"Charlottetown","xCoor":838,"yCoor":407},{"city":"Fredericton","xCoor":800,"yCoor":422},{"city":"Quebec","xCoor":734,"yCoor":427},{"city":"Ottawa","xCoor":685,"yCoor":459},{"city":"Toronto","xCoor":655,"yCoor":483},{"city":"Winnipeg","xCoor":420,"yCoor":430},{"city":"Regina","xCoor":336,"yCoor":417},{"city":"Edmonton","xCoor":250,"yCoor":364},{"city":"Victoria","xCoor":111,"yCoor":398},{"city":"Whitehorse","xCoor":115,"yCoor":235},{"city":"Yellowknife","xCoor":285,"yCoor":271},{"city":"Iqaluit","xCoor":645,"yCoor":243}]}

In this case I want to loop through the "Cities" array and get a random "city".

This is my code to get the Json Data:

function getJsonData() {
var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
    if (xhttp.readyState==4 && xhttp.status==200) {
        schedule = JSON.parse(xhttp.responseText);
    }
}

xhttp.open("GET", "capitals.json", true);
xhttp.send();}

This is what I have written to try and get the a Random City from the Cities array:

function drawPlanes() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
var cityNames = schedule["cities"];

for(var i = 0; i < cityNames.length; i++) {
    var obj = cityNames[i];
    var randomCity = obj.city[Math.floor(Math.random()*obj.city)];
    console.log(randomCity);
}}

In summary, I essentially just want to loop through this Json Array and get a Random City Value, for example: in the console it just prints lets say "Quebec", but the problem here is that what I wrote is not working. Hopefully what I am asking is clear enough.

Does this answer your question? [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — evolutionxbox, Nov 30 '21 at 16:48
There's no such thing as a "JSON array" or "Json Code". The content of `schedule` is an object with one property (`cities`) that stores an array of objects. — Andreas, Nov 30 '21 at 16:49
[How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) -> Add a [mcve] and _"**Describe the problem.** "It doesn't work" isn't descriptive enough to help people understand your problem. Instead, tell other readers what the expected behavior should be. Tell other readers what the exact wording of the error message is, and which line of code is producing it."_ — Andreas, Nov 30 '21 at 16:50
You should get a random value from 0 to the length of your cities and use that as an index of cities. https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript?page=1&tab=active#tab-top — rakesh shrestha, Nov 30 '21 at 16:56

axtck · Accepted Answer · 2021-11-30T17:05:45.277

0

You could [index] a random city with Math.random(), using cities.length as your max value.

const data = {"cities":[{"city":"St.John","xCoor":931,"yCoor":349},{"city":"Halifax","xCoor":844,"yCoor":424},{"city":"Charlottetown","xCoor":838,"yCoor":407},{"city":"Fredericton","xCoor":800,"yCoor":422},{"city":"Quebec","xCoor":734,"yCoor":427},{"city":"Ottawa","xCoor":685,"yCoor":459},{"city":"Toronto","xCoor":655,"yCoor":483},{"city":"Winnipeg","xCoor":420,"yCoor":430},{"city":"Regina","xCoor":336,"yCoor":417},{"city":"Edmonton","xCoor":250,"yCoor":364},{"city":"Victoria","xCoor":111,"yCoor":398},{"city":"Whitehorse","xCoor":115,"yCoor":235},{"city":"Yellowknife","xCoor":285,"yCoor":271},{"city":"Iqaluit","xCoor":645,"yCoor":243}]};

const randomCity = data.cities[Math.floor(Math.random() * data.cities.length)];

console.log(randomCity);

Edit

If you only want to get the city name, you can get the city property with .city.

edited Nov 30 '21 at 17:05

answered Nov 30 '21 at 16:53

axtck

3,707
2
10
26

my question really here: is there a way for me to get just a random city from cities array? Like just the city and the city only – Sslur Nov 30 '21 at 16:55
@Sslur do you only want the city name? Then do `data.cities[Math.floor(Math.random() * data.cities.length)].city` – axtck Nov 30 '21 at 16:59
Thanks that answered my question, @axtck – Sslur Nov 30 '21 at 17:03

Looping through a JSON array to get a Random value (Javascript)

1 Answers1

Edit