Loop for every x object in JSON aray

Question

I'm working on this small project (extension) where I fetch data from a JSON array with rapidapi, I'm able to get the data. But i'm unclear and new to get how to loop thru the whole dataset (which eventually I would try to store on the localstorage, but that's irrelevant for know)

concrete: I want to loop randomly thru the whole array and show every 1ste object of every second array in the whole array.

example of JSON array

0:{4 items
"kanji":{6 items
"character":"一"  ----> this one
"meaning":{...}1 item
"strokes":{...}3 items
"onyomi":{...}2 items
"kunyomi":{...}2 items
"video":{...}3 items
}
"radical":{...}7 items
"references":{...}3 items
"examples":[...]9 items
}
1:{4 items
"kanji":{6 items
"character":"飼"  ----> or this one
"meaning":{...}1 item
"strokes":{...}3 items
"onyomi":{...}2 items
"kunyomi":{...}2 items
"video":{...}3 items
}
"radical":{...}7 items
"references":{...}3 items
"examples":[...]6 items
}

And so one.

I've tried to get the JSON array and show an object of it. Then I tried to change the [1] number to a variable. But there I got stuck. I can't figure out how to create a random generator that picks every 1st object of the array like shown in the json array above.

var myfetch = fetch("https://kanjialive-api.p.rapidapi.com/api/public/kanji/all", {
  "method": "GET",
  "headers": {
    "x-rapidapi-host": "x",
    "x-rapidapi-key": "x"
  }
})

/** Parse response object
 * returns object parsed from json
 */
const getJsonFromRes = (res) => res.json();

/**  Logs some data. 
 * returns undefined
 */
//const logData = (data) => console.log(data[1].kanji.character);

/** Ignores its data parameter. Attempts to set an element to an uninitialized variable.
 */
const accessKanji = (data) => document.getElementById('kanji').innerHTML = data[1].kanji.character;

for (i in accessKanji()) {
  x += data[i].kanji.character + "<br>";
}

// print error to console. returns undefined.
const logError = (err) => console.log(err);

myfetch
  .then(getJsonFromRes)
  //.then(logData) 
  .then(accessKanji)
  .catch(logError);

I want to get a new object (the character object) every time at random. (how I would activate that is another step in my project)

Any guidance or link to tutorials about this that work well is very much appreciated!! Or a an example of course would be ideal.

Show the code where you tried to use a variable and it didn't work. — Barmar, Oct 28 '19 at 21:51
Have you tried using an actual JSON array, such as `[{ first item }, { second item }]` (instead of the key/value pairs that happen to use numbers? — Mike Christensen, Oct 28 '19 at 21:55
@Barmar this is what I originally tried but left out : see edit — Blckpstv, Oct 29 '19 at 20:18

score 2 · Accepted Answer · answered Oct 29 '19 at 20:27

2

accessKanji() doesn't return the object that was fetched. You also have the for loop at top-level, calling accessKanji() before the fetch() is done and without passing it any data.

You need to put that loop inside the accessKanji() function itself.

const accessKanji = (data) => {
  let chars = data.map(el => el.kanji.character + "<br>").join("");
  document.getElementById('kanji').innerHTML = chars;
}

answered Oct 29 '19 at 20:27

Barmar

741,623
53
500
612

This solves my question! Though it might be misleading to say it solves the question titles answer. Thanks!!! – Blckpstv Oct 30 '19 at 20:51
I don't understand the question title. – Barmar Oct 30 '19 at 20:53
Well with your result it shows all kanji.characters. At page load it was my intention to show a random kanji.character. Only one and at random. This is the explanation but how to formulate this in a correct title..? – Blckpstv Nov 06 '19 at 14:58
2

https://stackoverflow.com/questions/5915096/get-random-item-from-javascript-array – Barmar Nov 06 '19 at 18:08

Loop for every x object in JSON aray

1 Answers1