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

The error TS2304 occurs when the e2e tsconfig types cannot find the name 'browser'

Is there a way for me to extract information from the FAQs on this website?

What are some ways to optimize the performance of a Select Box?

In the context of Angular, the ELSE statement continues to run even after the IF condition has been satisfied within

Insert dynamic values into div attributes

When using json.dumps, it appends the attribute '"__pydantic_initialised__": true' to the object

Accessing data from the subscribe method

Exploring Angular: Enhancing Routing through GET Requests

What is causing the element to disappear in this basic Angular Material Sidenav component when using css border-radius? Check out the demo to see the issue in action

Error message: The protocol "https:" is not compatible with this function. Please use "http:" instead

What is the method for integrating JSON into the gdata objective-c framework?

Creating Production Files for Web using RxJs and TypeScript

Is it possible to convert a DynamoDB AttributeMap type into an interface?

What's the deal with TypeScript tsconfig allowing .json imports, but not allowing them in built .js files?

Update the style dynamically in Angular using an ngFor directive and an array of data

Getting started with Angular 7 and ng-bootstrap: the ultimate setup guide

Personalized AbstractCursor with JSON data

Having trouble displaying a JSON response on an HTML page with AJAX

Create an interactive slider using only images in an Ionic Angular content display

The server cannot process the content type 'application/json;charset=UTF-8' as it is not supported