Iterating through each object in the JSON file to showcase details about planes

Question

Iterating through each object in the JSON file to showcase details about planes

Question

How do I set up a functional example of these airplanes?

Background

I seem to have the initial part working, indicating that my loop may be causing issues. While I can extract the number of planes, I'm facing difficulties displaying all the planes.

You can find my Demo on CodePen here

I've been referring to the documentation available at this link but it lacks a complete functional example. My goal is to showcase the plane name, country, and display a large image. The styling can come later, but right now, I require a functioning example to kickstart my understanding and progress.

Code

API

I am retrieving data from this API endpoint

JSON output

https://i.sstatic.net/pwcUM.png

HTML

<p>There are a total of <span id="planeQuantity"></span> planes in the database.</p> <ul id="planes"></ul>

jQuery from

Link to jQuery

Javascript

var queryURL = "https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/?application_id=demo"; $.getJSON(queryURL, function (data) { var quantity = data.meta.count; $('#planeQuantity').append( quantity ); var name = data.id.name_i8n; var nation = data.id.nation; var lrgImg = data.id.images.large; $(data).each(function(){ console.log($(this).id); $('#planes').append('<li>' + name + 'is from ' + nation + '<img src="' + lrgImg + '">' + '</li>'); }); })

javascript json

Answer 1

Answer №1

I made some adjustments to your code and here are some comments:

Since your data.data is an Object, you can use for (key in object) for iterating through each key (you can also use jQuery's each, but this is a JavaScript approach);
The correct spelling for name_i8n should be name_i18n;
All your assignments like var = name, var = nation, and var = lrgImg should go inside the loop.

Here is the final code:

var queryURL = "https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/?application_id=demo";

$.getJSON(queryURL, function (data) {

  var quantity = data.meta.count;

  $('#planeQuantity').append( quantity );

  for (key in data.data) {

    var item = data.data[key];

    var name = item.name_i18n;
    var nation = item.nation;
    var lrgImg = item.images.large;    

    $('#planes').append('<li>' + name + 'is from ' + nation + '<img src="' + lrgImg + '">' + '</li>');

  }
})

Working pen: http://codepen.io/mrlew/pen/vgaexb

Edited with some explanation

You received a data Object that contains a data key which holds a large Object with a structure similar to this:

{
    "7290": { /* ... */ },
    "7291": {
        "name_i18n": "North American FJ-1 Fury",
        "nation":"usa",
        "images":{
            "large":"http://worldofwarplanes....png",
            /* ... */
        },
        /* ... */
    },
    "7292": { /* ... */ }

}

To iterate over all keys of data.data, we can use for (key in data.data) { }.

During each iteration, the variable key will be assigned the object key such as 7290, 7291, 7292. To access the corresponding value, we use data.data[key] (e.g., data.data["7291"]) and assign it to the variable item.

In JavaScript, using brackets is one method to retrieve values from an Object. Another way is through dot notation, though it doesn't work with numeric keys.

Valid usage:

data["data"]["7291"]

Invalid usage:

data.data.7291

Answer 2

I made some adjustments to your code and here are some comments:

Since your data.data is an Object, you can use for (key in object) for iterating through each key (you can also use jQuery's each, but this is a JavaScript approach);
The correct spelling for name_i8n should be name_i18n;
All your assignments like var = name, var = nation, and var = lrgImg should go inside the loop.

Here is the final code:

var queryURL = "https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/?application_id=demo";

$.getJSON(queryURL, function (data) {

  var quantity = data.meta.count;

  $('#planeQuantity').append( quantity );

  for (key in data.data) {

    var item = data.data[key];

    var name = item.name_i18n;
    var nation = item.nation;
    var lrgImg = item.images.large;    

    $('#planes').append('<li>' + name + 'is from ' + nation + '<img src="' + lrgImg + '">' + '</li>');

  }
})

Working pen: http://codepen.io/mrlew/pen/vgaexb

Edited with some explanation

You received a data Object that contains a data key which holds a large Object with a structure similar to this:

{
    "7290": { /* ... */ },
    "7291": {
        "name_i18n": "North American FJ-1 Fury",
        "nation":"usa",
        "images":{
            "large":"http://worldofwarplanes....png",
            /* ... */
        },
        /* ... */
    },
    "7292": { /* ... */ }

}

To iterate over all keys of data.data, we can use for (key in data.data) { }.

During each iteration, the variable key will be assigned the object key such as 7290, 7291, 7292. To access the corresponding value, we use data.data[key] (e.g., data.data["7291"]) and assign it to the variable item.

In JavaScript, using brackets is one method to retrieve values from an Object. Another way is through dot notation, though it doesn't work with numeric keys.

Valid usage:

data["data"]["7291"]

Invalid usage:

data.data.7291

Answer 3

Answer №2

It is important to assign unique values to name, nation and lrgImg within the each function in order to avoid uniform elements. Additionally, make sure to iterate through the nested data object (data.data). Here's an example:

var queryURL = "https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/?application_id=demo";

$.getJSON(queryURL, function(data) {

  var quantity = data.meta.count;

  $('#planeQuantity').append(quantity);

  $.each(data.data, function(key, value){
    var name = value.name_i18n; // extract the name
    var nation = value.nation; // extract the nation
    var lrgImg = value.images.large; // extract large image

    $('#planes').append('<li>' + name + ' hails from ' + nation + '<img src="' + lrgImg + '">' + '</li>');
  });
});

Answer 4

It is important to assign unique values to name, nation and lrgImg within the each function in order to avoid uniform elements. Additionally, make sure to iterate through the nested data object (data.data). Here's an example:

var queryURL = "https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/?application_id=demo";

$.getJSON(queryURL, function(data) {

  var quantity = data.meta.count;

  $('#planeQuantity').append(quantity);

  $.each(data.data, function(key, value){
    var name = value.name_i18n; // extract the name
    var nation = value.nation; // extract the nation
    var lrgImg = value.images.large; // extract large image

    $('#planes').append('<li>' + name + ' hails from ' + nation + '<img src="' + lrgImg + '">' + '</li>');
  });
});

Answer 5

Answer №3

let requestURL = "https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/? application_id=demo";

$.getJSON(requestURL, function (response) {
    let totalPlanes = response.meta.count;
    $('#planeCount').append( totalPlanes );

   $.each(response.data, function(index, element) {
       let planeName = element.name_i18n;
       let country = element.nation;
       let largeImage = element.images.large;

       $('#planeList').append('<li>' + planeName + ' is from ' + country + '<img src="' + largeImage + '">' + '</li>');
   });
});

Answer 6

let requestURL = "https://api.worldofwarplanes.eu/wowp/encyclopedia/planes/? application_id=demo";

$.getJSON(requestURL, function (response) {
    let totalPlanes = response.meta.count;
    $('#planeCount').append( totalPlanes );

   $.each(response.data, function(index, element) {
       let planeName = element.name_i18n;
       let country = element.nation;
       let largeImage = element.images.large;

       $('#planeList').append('<li>' + planeName + ' is from ' + country + '<img src="' + largeImage + '">' + '</li>');
   });
});

Answer 7

Answer №4

To successfully loop through the data.data object, you should utilize $.each() instead of $.fn.each(), especially if you're not dealing with DOM elements.

$.each(data.data, function(index, item){

   console.log(index) // "4101"
   console.log(item.name) // "type=91"
})

Answer 8

To successfully loop through the data.data object, you should utilize $.each() instead of $.fn.each(), especially if you're not dealing with DOM elements.

$.each(data.data, function(index, item){

   console.log(index) // "4101"
   console.log(item.name) // "type=91"
})

Iterating through each object in the JSON file to showcase details about planes

Question

Background

Code

API

JSON output

HTML

jQuery from

Javascript

Answer №1

Working pen: http://codepen.io/mrlew/pen/vgaexb

Answer №2

Answer №3

Answer №4

Similar questions

I have some information stored in JSON format and I am looking to transform it into a CSV file

Guide to creating a Javascript API wrapper

Is there a way to ensure the collapsible item stays in its position?

Getting URL Parameters in Angular JS

Navigate through the options on the left menu by sliding your

The asynchronous functionality for reading and writing files from 'fs' is not functioning properly

Obtaining an element through its id using an expression in an Angular directive

Experiencing an issue where the canvas element fails to render on mobile Chrome browser,

What could be causing app.put() to fail in updating documents within mongodb?

NextJS is throwing an error: The prop `href` in `<Link>` should be a `string` or `object`, but it received `undefined` instead

tips for adding text to an input field after it has been submitted

"Unravel cyclic dependencies in Java objects using Jackson for des

What is the best way to emphasize a table row during a search rather than just the text?

Error: The index "id" is not defined

Issue: Incompatibility in metadata versions detected for module .../ngx-masonry/ngx-masonry.d.ts. Level 4 version identified, whereas level 3 version

How can I utilize data retrieved from $http.get in Vue.js once the page has finished loading?

I need assistance with an issue on my Google Dev Console, as it keeps showing an error stating that ".getcontext is

An error message stating "ReferenceError: str is not defined" was encountered in Firefox while using the Gettext Library

Generating variables dynamically within a React Native component

ensure that angular's ng-if directive sets aside space to display content when triggered by an event