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

Twitter typeahead not functioning properly when used in conjunction with ajax requests

I possess an item, but unfortunately, I am only able to save the first object from this possession

What are the steps to resolve warnings in an imported json file?

A fresh perspective on incorporating setInterval with external scripts in Angular 7

Retrieve the user information from Auth0 within the NestJS application

Python encounters a Json Decoder Error while trying to read data from a JSON file

Merge topics together in RxJS like zip

Expanding MySQLi: Adding additional and nested results

Creating definitions for generic static members within a third-party module

Executing a series of imported functions from a TypeScript module

callbacks in amazon-cognito-identity-js

Obtain JSON data response in PHP with the help of jQuery

A practical method for restructuring or dividing a string containing JSON entries

Prevent auth0 express middleware from causing server crashes by handling failures silently

Retrieving data stored in a JSON file and loading it into a Backbone model

Is there a way to create fresh instances of a class using Injector rather than utilizing a singleton pattern?

Efficiently managing various, yet closely related routes in Angular

Creation of source map for Ionic 2 TypeScript not successful

Tips for deserializing a JSON object with an object or an array of objects

Is there a way to ensure that the onChange event of ionic-selectable is triggered twice?