Retrieve the data from a JSON file using Angular 4

Question

Retrieve the data from a JSON file using Angular 4

I have a JSON data structure that looks like this:

[{"id": "ARMpalmerillas07", "type": "GreenHouse","act_OpenVentanaCen": {"type": "float", "value": 0, "metadata": {"accuracy": {"type": "Float", "value": "07/02/2018 13:08 : 43 "}}},
"act_OpenVentanaLatNS": {"type": "float", "value": 0, "metadata": {"accuracy": {"type": "Float", "value": "07/02/2018 13:08 : 43 "}}},
"act_Aerotherm": {"type": "float", "value": 0, "metadata": {"accuracy": {"type": "Float", "value": "07/02/2018 13:08 : 43 "}}},
"act_BombaCalefaccion": {"type": "float", "value": 0, "metadata": {"accuracy": {"type": "Float", "value": "07/02/2018 13:08 : 43 "}}},
"var_ValvulaPpnalCalefaccion": {"type": "float", "value": 0, "metadata": {"accuracy": {"type": "Float", "value": "07/02/2018 13:08 : 43 "}}},
"var_VoltSensorTempSuelo3": {"type": "float", "value": 3, "metadata": {"accuracy": {"type": "Float", "value": "07/02/2018 13:08 : 43 "}}}}]

Currently, I am unsure of how to work with this data. Specifically, I would like to extract the value stored in

var_ValvulaPpnalCalefaccion.value

In my code, I am utilizing the .map(res => res.json()); method in both the component and the service.

public datos: any = [];
this.datos = response;
console.log('Showing the headers:' + JSON.stringify(this.datos));

How can I correctly assign these values?

At the moment, I am attempting this:

public Tempext: ContextBrokerModels;

Model Definition:

export class ContextBrokerModels {
  builder(
    public type: string,
    public value: string
  ) {}
}

this.Tempext = response[0].var_ValvulaPpnalCalefaccion.value;

Is this approach correct?

json angular typescript

Answer 1

Answer №1

You can simplify your process by following these steps. Start by creating a new class called ValvePpnalHeating:

export class ValvePpnalHeating{
    type: string;
    value: number;
    metadata = {};

    constructor(values: Object = {}) {
        Object.assign(this, values);
    }
}

Next, in your service, you can use the following code snippet:

.map((res: Response) => res.json()[0].var_ValvePpnalHeating.map(json => new ValvePpnalHeating(json)));

This will result in an

Observable<ValvePpnalHeating>

With this object, you have the flexibility to manipulate its properties, such as in the HTML {{variableValve.value}}

Note: The above code has not been tested. It is a method I have utilized in one of my projects, where you can also find additional examples...

Answer 2

You can simplify your process by following these steps. Start by creating a new class called ValvePpnalHeating:

export class ValvePpnalHeating{
    type: string;
    value: number;
    metadata = {};

    constructor(values: Object = {}) {
        Object.assign(this, values);
    }
}

Next, in your service, you can use the following code snippet:

.map((res: Response) => res.json()[0].var_ValvePpnalHeating.map(json => new ValvePpnalHeating(json)));

This will result in an

Observable<ValvePpnalHeating>

With this object, you have the flexibility to manipulate its properties, such as in the HTML {{variableValve.value}}

Note: The above code has not been tested. It is a method I have utilized in one of my projects, where you can also find additional examples...

Answer 3

Answer №2

//service
constructor(httpClient:HttpClient)
{}
getData()
{
      return this.httpClient.get("url").map(res=>res[0].var_ValvulaPpnalCalefaccion.value);
}
//Component
miService.getData.subscribe(res=>console.log(res));

Alternatively,

//service
constructor(httpClient:HttpClient)
{}
getData()
{
      return this.httpClient.get("url").map(res=>res[0]);
}
//Component
miService.getData.subscribe(res=>{
   console.log(res.var_ValvulaPpnalCalefaccion.value);
});

Answer 4

//service
constructor(httpClient:HttpClient)
{}
getData()
{
      return this.httpClient.get("url").map(res=>res[0].var_ValvulaPpnalCalefaccion.value);
}
//Component
miService.getData.subscribe(res=>console.log(res));

Alternatively,

//service
constructor(httpClient:HttpClient)
{}
getData()
{
      return this.httpClient.get("url").map(res=>res[0]);
}
//Component
miService.getData.subscribe(res=>{
   console.log(res.var_ValvulaPpnalCalefaccion.value);
});

Retrieve the data from a JSON file using Angular 4

Answer №1

Answer №2

Similar questions

Desiring the ability to retrieve a JSON response from a Laravel controller for use in my javascript code

In TypeScript Next.js 14 APP, object literals are limited to declaring existing properties

Tips for retrieving and presenting information from a JSON document in a React TypeScript application

Unable to link to '' because it is not recognized as a valid attribute of '' in Angular 2

custom form control component combined with an issue

Is it possible to populate the blank cells in the weekday columns for previous and following months in a mat-datepicker or mat-calendar's display?

Error encountered when providing valid data types as arguments in a React/Typescript function

Access the most up-to-date information through the API URL

Property of object (TS) cannot be accessed

What could be causing my project to install an erroneous Angular version?

Identify the locality and apply it to the root module of Angular 2 by utilizing a provider

Saving a JSON object to multiple JSON objects in TypeScript - The ultimate guide

Python code to transform a CSV file into JSON format is not working properly due to

How can I make my webpage fill the entire width of an iPhone screen when in landscape mode using Angular or React?

When using JsonConvert.DeserializeObject from Newtonsoft.Json, the issue of losing a non-printable ASCII character (specifically the group separator) during deserialization may

On the subsequent iteration of the function, transfer a variable from the end of the function to the beginning within the same

"Unlocking the potential of RavenDB 4.0 with raw json data storage

Exploring the Response Object in Express JS: A Comprehensive Guide

How can you implement Jquery Ajax function for enhancing the Ecommerce Category Layout?

Updating the JSON object wrapper name received from a WCF service method