Having trouble displaying JSON

Question

I have looked all over as to why this is happening. I have a script that uses AJAX to get local JSON files and merge them together so I can later display the data in a HTML table.

The script works fine to display the objects in Chrome Console. But I am unable to access particular elements such as 'object.country'. Any help on how to reslove this?

console output (Shortened):

(3) [Array(244), "success", {…}]
0: Array(244)
[0 … 99]
0: {country: "Afghanistan", city: "Kabul", continent: "Asia", costline: 0, currency_name: "Afghanistan Afghani", …}

Script

function onLoad() {
    $.when(
        $.ajax({
            url: "./country-objects/country-by-capital-city.json",
            type: "GET",
            dataType: 'JSON'
        }),
        $.ajax({
            url: "./country-objects/country-by-continent.json",
            type: "GET",
            dataType: 'JSON'
        }),
        $.ajax({
            url: "./country-objects/country-by-costline.json",
            type: "GET",
            dataType: 'JSON'
        }),
        $.ajax({
            url: "./country-objects/country-by-currency-name.json",
            type: "GET",
            dataType: 'JSON'
        }),
        $.ajax({
            url: "./country-objects/country-by-flag.json",
            type: "GET",
            dataType: 'JSON'
        }),
        $.ajax({
            url: "./country-objects/country-by-domain-tld.json",
            type: "GET",
            dataType: 'JSON'
        })).then(function (res1, res2, res3, res4, res5, res6) {

        const object = $.extend(true, res1, res2, res3, res4, res5, res6);

        console.log(object);
    })
}

-- Edit --

Example objects from each JSON file (first entry of each). ALl files in same order a-z:

// /country-objects/country-by-capital-city.json
  {
    "country": "Afghanistan",
    "city": "Kabul"
  }

// /country-objects/country-by-continent.json
{
    "country": "Afghanistan",
    "continent": "Asia"
  }

// /country-objects/country-by-costline.json
{
    "country": "Afghanistan",
    "costline": 0
  }

// /country-objects/country-by-currency-name.json

{
    "country": "Afghanistan",
    "currency_name": "Afghanistan Afghani"
  }

// /country-objects/country-by-flag.json 
{
    "country": "Afghanistan",
    "flag_base64": "data:image\/svg+xml;base64,PHN2ZyB4bWxucz0ia......"
}

// /country-objects/country-by-domain-tld.json
{
    "country": "Afghanistan",
    "tld": ".af"
  }

// Goal, continue for each country

{
"country": "Afghanistan",
        "city": "Kabul",
        "continent": "Asia",
        "costline": 0,
        "currency_name": "Afghanistan Afghani",
        "flag_base64": "data:image\/svg+xml;base64,PHN2ZyB4bWxucz0ia......",
        "tld": ".af"
},

user_14545549 · Answer

I can iterate through the array like so.

for (let i = 0;  i < object.length; i++) {

                let obj = object[i];
                obj.forEach(function (item) {
                    console.log(item.country+" | "+item.continent);
                });
            }

Thank you @Frenchy for pointing that out.

user_7380779 · Answer

You could iterate or filter:

var data = [{
    "country": "Afghanistan",
            "city": "Kabul",
            "continent": "Asia",
            "costline": 0,
            "currency_name": "Afghanistan Afghani",
            "flag_base64": "data:image\/svg+xml;base64,PHN2ZyB4bWxucz0ia......",
            "tld": ".af"
    },
    {
    "country": "France",
            "city": "Paris",
            "continent": "Asia",
            "costline": 0,
            "currency_name": "Euro",
            "flag_base64": "data:image\/svg+xml;base64,PHN2ZyB4bWxucz0ia......",
            "tld": ".af"
    },  ];
  //iterate
    data.forEach(function(rec, index){

            console.log(rec.country, rec.city);
    });
  
  var datafilter = data.filter( r => r.country == "France");
  console.log(datafilter)
  
  datafilter = data.filter( r => r.costline == 0);
    console.log(datafilter)

Having trouble displaying JSON

2 Answers