What's the best way to interpret JSON from an api ?

Question

I'm working on an app that uses the wikipedia api, and i'm struggling to find the best way to interpret the results given to me by the ajax request :

The JSON I get looks like this :

{
  "batchcomplete": "",
  "query": {
    "pages": {
      "277029": {
        "pageid": 277029,
        "ns": 0,
        "title": "Dog (zodiac)",
        "index": 5,
        "thumbnail": {
          "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Dog_2.svg/50px-Dog_2.svg.png",
          "width": 50,
          "height": 50
        },
        "pageimage": "Dog_2.svg",
        "extract": "<p>The <b>Dog</b> (<b>狗</b>) is eleventh of the 12-year cycle of animals which appear in the Chinese zodiac related to the Chinese calendar. The <b>Year of the Dog</b> is associated with the Earthly Branch symbol <b>戌</b>. The character 狗 refers to the actual animal while 戌 refers to the zodiac animal..."
      },
      "552756": {
        "pageid": 552756,
        "ns": 0,
        "title": "That Dog",
        "index": 4,
        "extract": "<p><b>That Dog</b> (styled as <b>that dog.</b>) is a Los Angeles-based rock band that formed in 1991 and dissolved in 1997, reuniting in 2011. The band originally consisted of Anna Waronker on lead vocals and guitar, Rachel Haden on bass guitar and vocals, her sister Petra Haden on violin and vocals..."
      },
      "779986": {
        "pageid": 779986,
        "ns": 0,
        "title": "Dog Eat Dog",
        "index": 7,
        "extract": "<p><b>Dog Eat Dog</b> may refer to:</p>..."
      },
      "3279728": {
        "pageid": 3279728,
        "ns": 0,
        "title": "Dog meat",
        "index": 6,
        "thumbnail": {
          "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Dog_Meat.jpg/50px-Dog_Meat.jpg",
          "width": 50,
          "height": 33
        },
        "pageimage": "Dog_Meat.jpg",
        "extract": "<p><b>Dog meat</b> is the flesh and other edible parts derived from dogs. Historically, human consumption of dog meat has been recorded in many parts of the world. In the 21st century, most dog meat is consumed in China, Korea, and Vietnam, and it is still eaten or is legal to be eaten in other countries..."
      }
    } 
  }
}

I can access the pages easily using result.query.pages but thes I need to access each pages independently, without knowing what their ID will be. I thought at first, if I had to access the title of the first page for exemple, to use

 query.pages[Object.keys(pages)[0]].title

But I thought it might be overly complicated. Is there a more efficient way to do it ?

Thanks a bunch !

Answer 1

Since we are talking about MediaWiki use formatversion=2 in your request and you won't have the problem you have now!

MediaWiki JSON version 2

Changes to JSON output format

• Have action=query's "pages" be an array, instead of an object with page ids as keys that can be difficult to iterate.

You can also check this post for your current format: Extracting data from JSON

Answer 2

The simplest way to turn this format into an array (if you can't use the formatversion=2 technique mentioned by @GiannisMp) looks to be Object.values(results.query.pages). Once you have it in an array, you can use standard array techniques for manipulating it, e.g.:

const results = {"batchcomplete": "", "query": {"pages": {"277029": {"extract": "<p>The <b>Dog</b> (<b>狗</b>) is eleventh of the 12-year cycle of animals which appear in the Chinese zodiac related to the Chinese calendar. The <b>Year of the Dog</b> is associated with the Earthly Branch symbol <b>戌</b>. The character 狗 refers to the actual animal while 戌 refers to the zodiac animal...", "index": 5, "ns": 0, "pageid": 277029, "pageimage": "Dog_2.svg", "thumbnail": {"height": 50, "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Dog_2.svg/50px-Dog_2.svg.png", "width": 50}, "title": "Dog (zodiac)"}, "3279728": {"extract": "<p><b>Dog meat</b> is the flesh and other edible parts derived from dogs. Historically, human consumption of dog meat has been recorded in many parts of the world. In the 21st century, most dog meat is consumed in China, Korea, and Vietnam, and it is still eaten or is legal to be eaten in other countries...", "index": 6, "ns": 0, "pageid": 3279728, "pageimage": "Dog_Meat.jpg", "thumbnail": {"height": 33, "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Dog_Meat.jpg/50px-Dog_Meat.jpg", "width": 50}, "title": "Dog meat"}, "552756": {"extract": "<p><b>That Dog</b> (styled as <b>that dog.</b>) is a Los Angeles-based rock band that formed in 1991 and dissolved in 1997, reuniting in 2011. The band originally consisted of Anna Waronker on lead vocals and guitar, Rachel Haden on bass guitar and vocals, her sister Petra Haden on violin and vocals...", "index": 4, "ns": 0, "pageid": 552756, "title": "That Dog"}, "779986": {"extract": "<p><b>Dog Eat Dog</b> may refer to:</p>...", "index": 7, "ns": 0, "pageid": 779986, "title": "Dog Eat Dog"}}}}

const pages = Object.values(results.query.pages)
const titles = pages.map(page => page.title)

console.log(titles)

Answer 3

You can iterate through pages using the following approach:

for (let id in query.pages) {
    let page = query.pages[id];
    // access title like this: page.title
}

To convert pages to an array, use Object.values(query.pages), and if you just want to access the tilte of the first page:

Object.values(query.pages)[0].title

Answer 4

if I had to access the title of the first page for exemple

Destructuring assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

var obj = {  "batchcomplete": "",  "query": {    "pages": {      "277029": {        "pageid": 277029,        "ns": 0,        "title": "Dog (zodiac)",        "index": 5,        "thumbnail": {          "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Dog_2.svg/50px-Dog_2.svg.png",          "width": 50,          "height": 50        },        "pageimage": "Dog_2.svg",        "extract": "<p>The <b>Dog</b> (<b>狗</b>) is eleventh of the 12-year cycle of animals which appear in the Chinese zodiac related to the Chinese calendar. The <b>Year of the Dog</b> is associated with the Earthly Branch symbol <b>戌</b>. The character 狗 refers to the actual animal while 戌 refers to the zodiac animal..."      },      "552756": {        "pageid": 552756,        "ns": 0,        "title": "That Dog",        "index": 4,        "extract": "<p><b>That Dog</b> (styled as <b>that dog.</b>) is a Los Angeles-based rock band that formed in 1991 and dissolved in 1997, reuniting in 2011. The band originally consisted of Anna Waronker on lead vocals and guitar, Rachel Haden on bass guitar and vocals, her sister Petra Haden on violin and vocals..."      },      "779986": {        "pageid": 779986,        "ns": 0,        "title": "Dog Eat Dog",        "index": 7,        "extract": "<p><b>Dog Eat Dog</b> may refer to:</p>..."      },      "3279728": {        "pageid": 3279728,        "ns": 0,        "title": "Dog meat",        "index": 6,        "thumbnail": {          "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Dog_Meat.jpg/50px-Dog_Meat.jpg",          "width": 50,          "height": 33        },        "pageimage": "Dog_Meat.jpg",        "extract": "<p><b>Dog meat</b> is the flesh and other edible parts derived from dogs. Historically, human consumption of dog meat has been recorded in many parts of the world. In the 21st century, most dog meat is consumed in China, Korea, and Vietnam, and it is still eaten or is legal to be eaten in other countries..."      }    }   }};

let [first] = Object.values(obj.query.pages);
console.log(first.title);

To access these values you can use the functions forEach and Object.entries to get the pageId and the object page

var obj = {  "batchcomplete": "",  "query": {    "pages": {      "277029": {        "pageid": 277029,        "ns": 0,        "title": "Dog (zodiac)",        "index": 5,        "thumbnail": {          "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Dog_2.svg/50px-Dog_2.svg.png",          "width": 50,          "height": 50        },        "pageimage": "Dog_2.svg",        "extract": "<p>The <b>Dog</b> (<b>狗</b>) is eleventh of the 12-year cycle of animals which appear in the Chinese zodiac related to the Chinese calendar. The <b>Year of the Dog</b> is associated with the Earthly Branch symbol <b>戌</b>. The character 狗 refers to the actual animal while 戌 refers to the zodiac animal..."      },      "552756": {        "pageid": 552756,        "ns": 0,        "title": "That Dog",        "index": 4,        "extract": "<p><b>That Dog</b> (styled as <b>that dog.</b>) is a Los Angeles-based rock band that formed in 1991 and dissolved in 1997, reuniting in 2011. The band originally consisted of Anna Waronker on lead vocals and guitar, Rachel Haden on bass guitar and vocals, her sister Petra Haden on violin and vocals..."      },      "779986": {        "pageid": 779986,        "ns": 0,        "title": "Dog Eat Dog",        "index": 7,        "extract": "<p><b>Dog Eat Dog</b> may refer to:</p>..."      },      "3279728": {        "pageid": 3279728,        "ns": 0,        "title": "Dog meat",        "index": 6,        "thumbnail": {          "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Dog_Meat.jpg/50px-Dog_Meat.jpg",          "width": 50,          "height": 33        },        "pageimage": "Dog_Meat.jpg",        "extract": "<p><b>Dog meat</b> is the flesh and other edible parts derived from dogs. Historically, human consumption of dog meat has been recorded in many parts of the world. In the 21st century, most dog meat is consumed in China, Korea, and Vietnam, and it is still eaten or is legal to be eaten in other countries..."      }    }   }};

Object.entries(obj.query.pages).forEach(([pageId, page], index) => {
  console.log(`'${page.title}' at index (${index})`);
});