How to retrieve an array stored within a JSON object

Question

How to retrieve an array stored within a JSON object

I am trying to access a specific array within an object from a JSON file. Here is the snippet of the data I'm dealing with:

best-sellers": [
    {
      "title": "Chuteira Nike HyperVenomX Proximo II Society",
      "price": 499.90,
      "installments": {
        "number": 10,
        "value": 49.90
      },
      "high-top": true,
      "category": "society",
      "image": ""
    },
    {
      "title": "Chuteira Nike HyperVenom Phantom III Cano Alto Campo",
      "price": 899.90,
      "installments": {
        "number": 10,
        "value": 89.90
      },
      "high-top": true,
      "category": "campo",
      "image": ""
    }
}
]

This is how my component code looks like:

   ngOnInit(): void {
      this.service
      .lista()
      .subscribe(chuteiras =>{
        this.chuteiras = chuteiras;
      })
  }

and in my template, I have written:

<div *ngFor="let chuteira of chuteiras.best-sellers">

However, Angular does not seem to recognize `best-sellers" and it throws the following error:

Cannot read property 'best' of undefined

json angular typescript

Answer 1

Answer №1

To access the elements, bracket notation is the way to go.

<div *ngFor="let sneaker of sneakers["top-picks"]">

Answer 2

To access the elements, bracket notation is the way to go.

<div *ngFor="let sneaker of sneakers["top-picks"]">

Answer 3

Answer №2

While that approach may work, Angular 6 introduced a more straightforward solution. When I encountered this issue, I initially tried the suggested method but it did not yield the desired results. After conducting some research and implementing my own modifications, I eventually arrived at a different solution.

1. Begin by creating a function to fetch JSON data, utilizing a web API in my case:

getTrending() {
    return this.http.get(

${this.api_key}

);
  }

2. Invoke the function within a service, importing it into the component and adding the following code snippet:

showPopular(): void {
         this.api.getTrending().subscribe((data:  Array<object>) => {
          this.list  =  data['results'];
          console.log(this.list);
       });
      }

By doing so, the 'data' variable is able to access only the specific information needed.

Answer 4

While that approach may work, Angular 6 introduced a more straightforward solution. When I encountered this issue, I initially tried the suggested method but it did not yield the desired results. After conducting some research and implementing my own modifications, I eventually arrived at a different solution.

1. Begin by creating a function to fetch JSON data, utilizing a web API in my case:

getTrending() {
    return this.http.get(

${this.api_key}

);
  }

2. Invoke the function within a service, importing it into the component and adding the following code snippet:

showPopular(): void {
         this.api.getTrending().subscribe((data:  Array<object>) => {
          this.list  =  data['results'];
          console.log(this.list);
       });
      }

By doing so, the 'data' variable is able to access only the specific information needed.

How to retrieve an array stored within a JSON object

Answer №1

Answer №2

Similar questions

Convert TypeScript model to JSON while excluding properties with null values

Utilizing *ngfor in Angular 7 to Group and Display Data

Upcoming Authentication Update: Enhancing User Profile with Additional Data Points

Invoke the method saved as a class attribute

GoLang Struct JSON conversion issue

Creating a dynamic selection in Angular without duplicate values

The Android value with the type java.lang.String cannot be transformed into a JSONArray

Add a hash to the file name of the JSON translation asset

Using JSON / jQuery: How to Handle XML Data in the Success Function of an AJAX Post Request

Error retrieving content from website: Failed to connect to http://roblox.plus:2052/limiteds

Learn how to effectively deserialize a JSON string with an array into a specific class using GSON

Is there a way to mock a keycloak API call for testing purposes during local development?

What is the best way to store numerous objects in an array at once?

What is the best way to send data to a child component in Angular, including components that can be

Enhance the parsed struct by adding a new variable called json

Typescript polymorphism allows for the ability to create various

Is there a specific function that is triggered upon the successful completion of a subscription process?

Excessive string length within a JSON array results in a 400 Bad Request error on a .NET Core Web API

The type 'ElementClass' is lacking several key properties, specifically context, setState, forceUpdate, props, and refs

I successfully added JSON data to the postgresql query, however the resulting output was not as anticipated