Formatting Nested JSON Arrays from Wikipedia API

Is it possible to stringfy nested JSON arrays when the length of the arrays is not known or dynamic? For example, if the JSON data from the Wikipedia API is nested arrays, is there a way to recursively loop through the arrays and access specific array elements?

Here’s why I’m asking, I’ve hit a bit of a snag on the “Build a Wikipedia Viewer” project. After over coming multiple challenges in figuring out how to get JSON and what URL to use for the API, I finally figured something out which outputs the JSON in nested arrays. Now, I’m at the point where I need to format the results so that it’s listed like a search engine.

I’m thinking I need to perform some recursive loops, but after reviewing the "Iterate Through an Array with a For Loop " challenge and studying various pagination scripts, and much trial and error, it seems I’m missing something between getting the arrays and looping them. I’m thinking the arrays need to be stringified, but the arrays that need to be processed are nested.

Here’s my pen:

As you can see, when you perform a search, the data is displayed, but not like it should be. When you hover over the “Read More…” link, all of the URLs are there.

The results should display as:

Read More Link


Title, Title, Title
Read More… (with all URLs in one href anchor)

From just taking a quick look at your code you could probably do something like this:

var Obj = JSON.parse(this.responseText);

var KyWrd = Obj[0];
var NumofRes = Obj[3].length;

var titles = Obj[1];     
var descriptions = Obj[2];
var urls = Obj[3];

for (var i = 0; i < NumofRes; i++) {
  var title = titles[i];
  var desc = descriptions[i];
  var url = urls[i];

  // "print" these to the page in whatever format you wish

Taking what @jonsandg recommended a step further and combining with a slightly modified version of the code (using some newer ES6 syntax) you currently have, you could iterate and display the results as follows:

const [KyWrd, titles, desc, urls] = JSON.parse(this.responseText);
document.getElementById("resultsHead").innerHTML = `<p>${titles.length} articles found for ""${KyWrd}:</p>`;
document.getElementById("results").innerHTML = titles.reduce((html, title, i) => {
  return html += `${title}<hr>${desc[i]}<hr><a href="${urls[i]}">Read more...</a><hr>`;
1 Like

@jonsandg That’s what I tried at first, but it wasn’t working.

@RandellDawson I tried the code you provided, but it didn’t work.

Thank you both for your input. It seems that I was headed in the right direction, but there seems to be an issue somewhere. I’ll keep at it for now and try to figure out a solution.

I don’t see where you put my code into your solution, but your current code has an extra } right before the </script> tag. Get rid of it and your code will show something when you perform a search.

@RandellDawson thanks for that catch! I was in the middle of trying something else when the computer I was on went down. Luckily Codepen autosaved most of the work I was doing.

Now, I got a simple counter loop to work, but need to figure out how to get it to scroll through the results, like 0 - n. Once I have that figured out, I’ll be done with this project. I should be able to figure it out here shortly, if not I may make another post for help.

Wow, I finally figured it out all this time I was using = instead +=. Now, just some pagination and I’ll be set.