Encountered an issue while trying to retrieve a value from an object within a

Question

Encountered an issue while trying to retrieve a value from an object within a

Reviewing the following JSON response:

 [
   {"name": "Afghanistan", ...},
   {"name": "country 2" ,...},
   {"name": "country 3" ,...},       
  ]

My goal is to extract only country names from the array. Can someone advise me on how I can achieve this?

async function fetchData(data, name) {
  var x = await fetch("https://restcountries.eu/rest/v2/all");
  var data = await x.json();
  
  var countryNames = [];
  for (let i = 0; i <= data.length; i++) {
    var countryName = data[i].name;
    
    countryNames.push(countryName)
  }
  console.log(countryNames);
}

fetchData();

javascript json

Answer 1

Answer №1

If you're looking to manipulate an array in JavaScript, consider using Array.prototype.map(). This method loops through each element and allows you to create a new array based on the original.

const response = [{"name": "Afghanistan",},{"name": "country 2",},{"name": "country 3",}]

// Extracting country names from the response array
const countryNames = response.map(country => country.name)
console.log(countryNames)

In case of data inconsistencies in the response object, there's an alternative approach that uses Array.prototype.flatMap(), which combines mapping and flattening operations to handle potential undefined values more gracefully.

const response = [{"name": "Afghanistan",},{"name": "country 2",},{"name": "country 3",},{"something": "with no name"}]

// Extracting country names or handling undefined values
const countryNames = response.flatMap(country => country.name || [])
console.log(countryNames)

Answer 2

If you're looking to manipulate an array in JavaScript, consider using Array.prototype.map(). This method loops through each element and allows you to create a new array based on the original.

const response = [{"name": "Afghanistan",},{"name": "country 2",},{"name": "country 3",}]

// Extracting country names from the response array
const countryNames = response.map(country => country.name)
console.log(countryNames)

In case of data inconsistencies in the response object, there's an alternative approach that uses Array.prototype.flatMap(), which combines mapping and flattening operations to handle potential undefined values more gracefully.

const response = [{"name": "Afghanistan",},{"name": "country 2",},{"name": "country 3",},{"something": "with no name"}]

// Extracting country names or handling undefined values
const countryNames = response.flatMap(country => country.name || [])
console.log(countryNames)

Answer 3

Answer №2

The issue lies in the for loop condition, which currently reads as

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

async function fetchValues(data, name) {
  var response = await fetch("https://restcountries.eu/rest/v2/all");
  var jsonData = await response.json();
  
  var countryNames = [];
  for (let index = 0; index < jsonData.length; index++) {
    var countryName = jsonData[index].name;
    
    countryNames.push(countryName);
  }
  console.log(countryNames);  // This line should be inside the for loop to display correct output
}

fetchValues();

Answer 4

The issue lies in the for loop condition, which currently reads as

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

async function fetchValues(data, name) {
  var response = await fetch("https://restcountries.eu/rest/v2/all");
  var jsonData = await response.json();
  
  var countryNames = [];
  for (let index = 0; index < jsonData.length; index++) {
    var countryName = jsonData[index].name;
    
    countryNames.push(countryName);
  }
  console.log(countryNames);  // This line should be inside the for loop to display correct output
}

fetchValues();

Encountered an issue while trying to retrieve a value from an object within a

Answer №1

Answer №2

Similar questions

Add and condense sub-row

Can I inform the interpreter that my function in TypeScript specifically handles undefined and null values?

Retrieve the text and image simultaneously using jQuery

Retrieve JSON data from PHP using D3.request

Explore the inner workings of Perl's JSON structure

Getting the URL for a downloaded image using ImageLoad on Android

Error alert: Unable to find the specified word

Utilizing JQuery to Retrieve JSONP Data from WCF

The invocation of `prisma.profile.findUnique()` is invalid due to inconsistent column data. An invalid character 'u' was found at index 0, resulting in a malformed ObjectID

What is the best way to adjust text across several lines to perfectly fit within a div's width?

Dealing with Unicode characters in Java and storing the output in both MySQL and HBase databases

Serializing Handpicked Attributes from an Array of Objects

The connection between MongoClient and Express has been established successfully, however, an error occcurred: TypeError: Cannot read the property 'collection' of null

Issue with this.setState() not updating value despite not being related to asynchronous updates

Changing position of element upon appearance of span in React

Issue: app.database function is not recognized with Firebase

Instructions for creating a JavaScript click function that iterates through all records, not just the initial record

Is there a way to change the format of the date "Wed Jan 01 2020 00:00:00 GMT+0530 (India Standard Time)" to JAN 01, 2020 in JavaScript?

What's the reason behind my REST API delivering a 401 error code?

Using a Typescript variable prior to its assignment