Tips on retrieving data from a JSON object

Question

Tips on retrieving data from a JSON object

I'm currently on a project involving Angular 5, and I'm still new to using Angular so I'm facing some challenges retrieving values from a JSON object. Here's the JSON response:

[{"student_guid":"198","seconds":510,"session_count":0,"unit_1":{"0":0,"1":0,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0}}]

My main objective is to access the values of unit_1. I'm displaying this data in a table and would like to iterate through the td elements. Retrieving other data with *ngFor is simple, but I need an easy solution to extract data from the unit_1 key. It would be ideal if I could handle all of this directly in the HTML view without involving typescript.

json angular typescript

Answer 1

Answer №1

After tackling the issue, I've come up with a solution.

To start off, create a pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'valueArray',
})
export class ValueArrayPipe implements PipeTransform {

  transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
  }
}

Next step is to import it into your component
Now, use the following code snippet to extract values from an object

<li *ngFor="let unit of student.unit_1 | valueArray">
{{student.unit_1[unit]}}</li>

If you wish to access keys as well, here's an example for that

<li *ngFor="let unit of student.unit_1 | valueArray">{{unit}}</li>

Answer 2

After tackling the issue, I've come up with a solution.

To start off, create a pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'valueArray',
})
export class ValueArrayPipe implements PipeTransform {

  transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
  }
}

Next step is to import it into your component
Now, use the following code snippet to extract values from an object

<li *ngFor="let unit of student.unit_1 | valueArray">
{{student.unit_1[unit]}}</li>

If you wish to access keys as well, here's an example for that

<li *ngFor="let unit of student.unit_1 | valueArray">{{unit}}</li>

Answer 3

Answer №2

If you're attempting to loop through an object, the standard *ngFor won't work for you. I came across a helpful post here that discusses creating a pipe to iterate over objects using *ngFor.

That being said, it might be worth revisiting your data structure and considering if using an array would be more suitable and simplify your development process. Take a look at the documentation for more information on *ngFor

Answer 4

If you're attempting to loop through an object, the standard *ngFor won't work for you. I came across a helpful post here that discusses creating a pipe to iterate over objects using *ngFor.

That being said, it might be worth revisiting your data structure and considering if using an array would be more suitable and simplify your development process. Take a look at the documentation for more information on *ngFor

Tips on retrieving data from a JSON object

Answer №1

Answer №2

Similar questions

Converting a JSON object into a different format using TypeScript

Best Practices for TypeScript and React: How to Handle Component State for Mounted Components

Retrieve a value from a nested JSON object and assign it to a new key in the same object with

Using Froala events in Angular 2: A guide

Is the position of 'subscribe()' in the code important?

Organize the attributes of components on the following line in Visual Studio Code

Comparison between Django serializers and rest_framework serializers

Encountered an error while attempting to execute Angular application due to schema validation failure

Is it necessary to increment the major version of a package when updating one of its dependencies to a major version?

The subscription data for nested classes appears to be displaying as undefined

Learn how to efficiently convert JSON data into a dictionary containing strings and SoilStat objects by utilizing the FastJSON library

The TSX file is encountering difficulty rendering an imported React Component

Select the data you wish to showcase on Highcharts

Cypress and Cucumber synergy: Experience automatic page reloads in Cypress with each test scenario in the Describe block

Customizing npm package within an Angular 13 project

Custom positioning of Mui Snackbar in V5

Guide to setting the current slide in your ngx owl carousel using Angular

Using Vue 2 with a personalized Axios setup, integrating Vuex, and incorporating Typescript for a robust

What is the process for transferring a function to reducers in Redux Toolkit?

Jackson: parsing an array of objects with varying types