How can I extract a specific data value from a JSON file in Ionic 2?

Question

How can I extract a specific data value from a JSON file in Ionic 2?

Here is the JSON data:

[
  {
    "id": 1,
    "label": "saw",
    "total": "100"
  },
  {
    "id": 2,
    "label": "saw1",
    "total": "300"
  },
  {
    "id": 3,
    "label": "saw2",
    "total": "400"
  }
]

Below is my Typescript code snippet:

this.http.get('http://www/upnionic/chart.php')
  .map(res => res.json()).subscribe(data => {
    this.qwerty = data; this.qwerty.forEach(element => {
        let product = element.total;
        this.pieChartData = product; 
        console.log(product);
    }); 
});

Any suggestions on how to display this JSON data in HTML using Ionic 2?

["100","300","400"]

json typescript charts ionic2 ionic3

Answer 1

Answer №1

Here is a code snippet that demonstrates how to extract values from an array and store them in another array

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  jsonData : any;
  val : any=[];
  constructor(public navCtrl: NavController) {
    this.jsonData=[{"id":1,"label":"saw","total":"100"},{"id":2,"label":"saw1","total":"300"},{"id":3,"label":"saw2","total":"400"}];
    this.jsonData.map((item)=>{
      this.val.push(item.total);
    });
    alert(this.val);
  }

}

Answer 2

Here is a code snippet that demonstrates how to extract values from an array and store them in another array

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  jsonData : any;
  val : any=[];
  constructor(public navCtrl: NavController) {
    this.jsonData=[{"id":1,"label":"saw","total":"100"},{"id":2,"label":"saw1","total":"300"},{"id":3,"label":"saw2","total":"400"}];
    this.jsonData.map((item)=>{
      this.val.push(item.total);
    });
    alert(this.val);
  }

}

How can I extract a specific data value from a JSON file in Ionic 2?

Answer №1

Similar questions

Utilize a fresh function in Angular to retrieve and store data from a URL into a variable

Error occurred in child process while processing the request in TypeScript: Debug Failure encountered

Encountering a JSON error while attempting to login through an API on the Ionic platform

Tips for retrieving unique records in Linq without duplicates

javascript retrieving JSON data through an API request from a redirected URL

Swift - JSON decoding error: "Was supposed to decode an array of any type, but instead found a dictionary."

My loop encountered an 'Undefined' error while attempting to retrieve an object from a JSON file

Limiting the Size of Highcharts Maps with maxWidth or maxHeight

Ways to classify the prop type of a functional component by specifying the different types of props for the FC

Step-by-step guide on mapping JSON payload values to a Plain Old Java Object in Mule

Question: What is the best way to store individual user responses in a text document?

Utilizing Angular2 with Firebase for efficient denormalized data queries

Prisma Date and Time Formatting Challenge

Exploring RPG YAJL's ability to parse nested arrays

Converting a JAXB XML file into a JSON format

Angular's mechanism for detecting changes in a callback function for updates

Building a DataFrame from JSON data using danfo-js, mongoDB, and mongoose on a Windows 10 platform: A guide

Session is not functioning properly as anticipated

Tips for initializing constructor arguments using JSON during object instantiation in TypeScript

Exploring the syntax of typescript when using createContext