How to get a property value from an array of objects in JavaScript

Question

I want to make an array with country names from a JSON file which contains an array of objects. These objects have a property name with the name of the country, which is what I need.

This is my JavaScript code which returns a list of undefined instead of country names:

import axios from 'axios';

const getTeamsFromUrl = async() => {
    const url = 'https://gist.githubusercontent.com/keeguon/2310008/raw/bdc2ce1c1e3f28f9cab5b4393c7549f38361be4e/countries.json';
    const response = await axios.get(url);
    const listOfCountries = response.data;

    // this console.log prints properly the array of objects
    // console.log(listOfCountries);

    for (let i = 0; i < listOfCountries.length; i++) {
        console.log(listOfCountries[i].name);
    }
}

console.log(await getTeamsFromUrl());

In the other hand, if I use forEach, I get this error message: listOfCountries.forEach is not a function

let x = listOfCountries.forEach(country => {
     console.log(country.name);
});

Thanks in advance!

@evolutionxbox, I'm using a console.log() in forEach for testing. It should to return something, right? — lix
– lix, Commented Dec 26, 2020 at 11:39
foreach should be working here but it might happen that in some cases the response.data is not an array so you should check that. — Nenad Vracar
– Nenad Vracar, Commented Dec 26, 2020 at 11:42
@lix it should be logging yes, but if you want any data back try swapping forEach with map. In your example x will always be undefined. — evolutionxbox
– evolutionxbox, Commented Dec 26, 2020 at 11:45
You'll need to show a sample of your data to get help on this. — pilchard
– pilchard, Commented Dec 26, 2020 at 11:48

Rich N · Accepted Answer · 2020-12-26 12:17:46Z

response.data is returning a string that needs to be parsed into an array. It's also returning a string that isn't valid JSON, so needs a little bit of work on it to create valid JSON.

The code below does this from your original URL and prints out the country names:

const axios = require('axios');
const getTeamsFromUrl = async () => {
    const url = 'https://gist.githubusercontent.com/keeguon/2310008/raw/bdc2ce1c1e3f28f9cab5b4393c7549f38361be4e/countries.json';
    const response = await axios.get(url);
    const listOfCountries = response.data;
    const jsonListOfCountries = listOfCountries.replace(/name:/g, '"name":').replace(/code:/g, '"code":').replace(/'/g, '"');
    const countries = JSON.parse(jsonListOfCountries);
    for (let i = 0; i < countries.length; i++) {
        console.log(countries[i].name);
    }
}

(async function MyFunc() {
    console.log(await getTeamsFromUrl());
})();

traktor · Accepted Answer · 2020-12-26 13:02:53Z

The "JSON" from the original gist is valid JavaScript, not JSON. You could (but don't) run the text through eval to obtain an Array object. Better still would be to download it and use it on the RHS of an assignment statement, possibly to convert it to JSON if you wanted to save it somewhere:

let listOfCountries =  paste-raw-downloaded-gist-content-here; // assign as an array literal
let json = listOfCountries.stringify();         // serialize as JSON text

The reasons why the JavaScript is not valid JSON are

property names have to be in double quotes, as in "country" and "code" instead of being unquoted,
string values need to be in double quotes, as in "Åland Islands" and "AX" instead being single quoted.

Trying to simplistically convert the gist into JSON with string replacements can lead to problems with the back slash escaped single quote in 'Cote D\'Ivoire' that using the gist in JavaScript source avoids.

Ozgur Sar · Accepted Answer · 2020-12-26 12:11:37Z

1

Your code is fine but your source json was invalid. This is tested an it works from another source.

const getTeamsFromUrl = async() => {
    const url = 'https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-name.json';
    const response = await axios.get(url);
    const listOfCountries = response.data;

    // this console.log prints properly the array of objects
    // console.log(listOfCountries);

    for (let i = 0; i < listOfCountries.length; i++) {
        console.log(listOfCountries[i].country);
    }
}
getTeamsFromUrl();

answered Dec 26, 2020 at 12:11

Ozgur Sar

2,2422 gold badges15 silver badges24 bronze badges

6 Comments

lix Over a year ago

You're completely right. I've tested with another JSON file and it works like a charm. Thanks @Ozgur

Vasilii Kovalev Over a year ago

It seems it is necessary to replace all single quotes by double ones in the initial JSON.

Ozgur Sar Over a year ago

@VasiliiKovalev yes, also property names even didn't have quotes.

Vasilii Kovalev Over a year ago

If you want to fix it fast, you can use jsonformatter.org. A button with wrench icon does it.

Ozgur Sar Over a year ago

lix doesn't have access to the source json. It is just a file on someone's github account. However Rick N provided a good answer to that on how to fix the json

|

Collectives™ on Stack Overflow

How to get a property value from an array of objects in JavaScript

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related