Unable to populate an array with a JSON object using Angular framework

Question

Unable to populate an array with a JSON object using Angular framework

Here is the JSON object I have:

Object { JP: "JAPAN", PAK: "PAKISTAN", IND: "INDIA", AUS: "AUSTRALIA" }

This JSON data was retrieved as a response from an HTTP GET request using HttpClient in Angular.

Now, I want to populate this data into the following structure to display it as a dropdown list.

countryList: { countryCode: string; countryName :string }[];

I attempted the following code snippet :

for (const key in resData) {
  if (resData.hasOwnProperty(key)) {
     var obj ={
       countryCode :key,
       countryName : resData[key]
      }
    this.countryList.push(obj);
  }
}

However, upon execution, I'm encountering this error

"_this.countryList.push is not a function"

What could be the issue here?

javascript arrays json angular typescript

Answer 1

Answer №1

In the code snippet you provided, the type of countryList is defined but it also needs to be initialized as an empty array before you can add elements to it. You can achieve this by adding the following line:

countryList: { countryCode: string; countryName: string }[] = [];

Answer 2

In the code snippet you provided, the type of countryList is defined but it also needs to be initialized as an empty array before you can add elements to it. You can achieve this by adding the following line:

countryList: { countryCode: string; countryName: string }[] = [];

Answer 3

Answer №2

To retrieve entries from the data set and subsequently transform it into an array of objects, you can follow this method:

Object.entries(nations).map(([identifier, name]) => ({
    countryCode: identifier,
    countryName: name
}))

Answer 4

To retrieve entries from the data set and subsequently transform it into an array of objects, you can follow this method:

Object.entries(nations).map(([identifier, name]) => ({
    countryCode: identifier,
    countryName: name
}))

Answer 5

Answer №3

To properly store a list of countries, ensure that you declare countryList as an array.

var countryData = { JP: "JAPAN", PAK: "PAKISTAN", IND: "INDIA", AUS: "AUSTRALIA" };
countryList = [];
for (const key in countryData) {
  if (countryData.hasOwnProperty(key)) {
     var obj ={
       countryCode :key,
       countryName : countryData[key]
      }
    countryList.push(obj);
  }
}
console.log(countryList)

Answer 6

To properly store a list of countries, ensure that you declare countryList as an array.

var countryData = { JP: "JAPAN", PAK: "PAKISTAN", IND: "INDIA", AUS: "AUSTRALIA" };
countryList = [];
for (const key in countryData) {
  if (countryData.hasOwnProperty(key)) {
     var obj ={
       countryCode :key,
       countryName : countryData[key]
      }
    countryList.push(obj);
  }
}
console.log(countryList)

Unable to populate an array with a JSON object using Angular framework

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to retrieve data from a jQuery AJAX call when it returns?

Decoding a JSON array API response in Golang: A step-by-step guide

Choosing values from an array using the IN statement

Tips for iterating over an array that implements either of two interfaces in TypeScript

Ways to update the UI dynamically in Angular without the need to refresh the entire page

Is there a way I can finish animating these divs in a diagonal motion?

Using *ngFor to dynamically update the DOM when an array is modified via ngrx

The error encountered is: "Unable to modify the 'x' property as it is readonly for the '[object Array]' object."

Unable to execute app.get in Express framework of Node.js

Issue: encountered an ECONNRESET error when attempting to read using the request module in mode.js

The value of element.scrollTop is consistently zero

Tips on personalizing the vue-filemanager interface within Laravel

What causes RangeError: Maximum call stack size exceeded when Element UI event handlers are triggered?

Retrieve the chosen date from a DatePicker using a Javascript function

Error [ERR_MODULE_NOT_FOUND]: Module could not be located in vscode

A mistake occurred during the afterAll function, resulting in a TypeError: Unable to access properties of an undefined entity (specifically, trying to read '

Determine if the user's request to my website is made through a URL visit or a script src/link href request

Component in Next Js fails to pass props when using getInitialProps

Tips for wrapping text in a column within material-ui's DataGrid

Verification of three-dimensional password format with the use of AngularJS