Convert Object to work with the Angular2

Question

Convert Object to work with the Angular2

Navigation

#1 by (3 votes)

1

I'm working with Angular two with the following JSON:

{
    "var_TempExt": [
        {
            "attrName": "var_TempExt",
            "attrValue": "8",
            "recvTime": "2018-02-02T13:57:45.000Z"
        },
        {
            "attrName": "var_TempExt",
            "attrValue": "8",
            "recvTime": "2018-02-02T13:57:45.000Z"
        },
        {
            "attrName": "var_TempExt",
            "attrValue": "8",
            "recvTime": "2018-02-02T13:57:45.000Z"
        },
        {
            "attrName": "var_TempExt",
            "attrValue": "8",
            "recvTime": "2018-02-02T13:57:45.000Z"
        }
    ],
    "var_TempIxt": [
        {
            "attrName": "var_TempInt",
            "attrValue": "15",
            "recvTime": "2018-02-02T13:57:45.000Z"
        },
        {
            "attrName": "var_TempInt",
            "attrValue": "15",
            "recvTime": "2018-02-02T13:57:45.000Z"
        },
        {
            "attrName": "var_TempInt",
            "attrValue": "15",
            "recvTime": "2018-02-02T13:57:45.000Z"
        },
        {
            "attrName": "var_TempInt",
            "attrValue": "15",
            "recvTime": "2018-02-02T13:57:45.000Z"
        }
    ],
    "var_HumRExt": [
        {
            "attrName": "var_HumRExt",
            "attrValue": "8",
            "recvTime": "2018-02-02T13:57:45.000Z"
        }
    ],
    "var_HumRInt": [
        {
            "attrName": "var_HumRInt",
            "attrValue": "8",
            "recvTime": "2018-02-02T13:57:45.000Z"
        }
    ],
    "var_RadiacionExt": [
        {
            "attrName": "var_RadiacionExt",
            "attrValue": "8",
            "recvTime": "2018-02-02T13:57:45.000Z"
        }
    ],
    "var_RadiacionGlobalInt": [
        {
            "attrName": "var_RadiacionGlobalInt",
            "attrValue": "8",
            "recvTime": "2018-02-02T13:57:45.000Z"
        }
    ],
    "var_CO2Exterior": [
        {
            "attrName": "var_CO2Exterior",
            "attrValue": "8",
            "recvTime": "2018-02-02T13:57:45.000Z"
        }
    ]
}

To register this response on my front I designed this:

A class responsible for the data model with the three attributes.

In my component I have declared this information:

miData: any = {};

Assigning the answer in such a way:

            this.miData = response;
            let var_TempExt: Inver[] = this.miData.var_TempExt;
            let var_TempInt: Inver[] = this.miData.var_TempInt;
            let var_HumRExt: Inver[] = this.miData.var_HumRExt;
            let var_HumRInt: Inver[] = this.miData.var_HumRInt;
            let var_RadiacionExt: Inver[] = this.miData.var_RadiacionExt;
            let var_RadiacionGlobalInt: Inver[] = this.miData.var_RadiacionGlobalInt;
            let var_CO2Exterior: Inver[] = this.miData.var_CO2Exterior;

Showing the information for example:

console.log('mostramos primer log: ' + var_CO2Exterior);

I get this result (an object with the information)

mostramos primer log: [object Object]

Using:

        console.log('mostramos primer log: ' + JSON.stringify(var_CO2Exterior));

It shows what that object contains:

mostramos primer log: [{"attrName":"var_CO2Exterior","attrValue":"8","recvTime":"2018-02-02T13:57:45.000Z"}]

How can I extract the information of each variable so as not to have an object? before I did it with a for and nesting if checking the name but it is very slow loading.

if (respuesta.some(inv => inv.attrName=='var_CO2Exterior')) {
  let valores= respuesta.map(inv => inv.attrValue);
  console.log(valores);
}

To be able to show on the html {{var_CO2Exterior.value}}

Greetings and thanks.

javascript angularjs-2.0 angular4

asked by Manolait 02.02.2018 в 15:04

source

1 answer

Maps Android Studio is not displayed when the app is downloaded from play store How can I allow connections from another local IP in XAMPP?

score 3 · Accepted Answer

Using the answer you received before (an array with all the data) you could use Array.reduce to keep the newest of each source (attrName). In a single pass you reduce the array to a few attributes, which will work quite fast even with hundreds (thousands) of elements:

var respuesta =[
	{	"attrName": "var_TempInt", "attrValue": "15", "recvTime": "2018-02-02T13:56:45.000Z"},
	{	"attrName": "var_TempInt", "attrValue": "15", "recvTime": "2018-02-02T13:55:45.000Z"},
	{	"attrName": "var_TempInt", "attrValue": "15", "recvTime": "2018-02-02T13:58:45.000Z"},
	{	"attrName": "var_TempInt", "attrValue": "15", "recvTime": "2018-02-02T13:57:45.000Z"},
	{	"attrName": "var_TempExt", "attrValue": "8", "recvTime": "2018-02-02T13:54:45.000Z"},
	{	"attrName": "var_TempExt", "attrValue": "8", "recvTime": "2018-02-02T13:53:45.000Z"},
	{	"attrName": "var_TempExt", "attrValue": "8", "recvTime": "2018-02-02T13:50:45.000Z"},
	{	"attrName": "var_TempExt", "attrValue": "8", "recvTime": "2018-02-02T13:57:45.000Z"}
]

var datos= respuesta.reduce((acumulado, elem) => {
  if (!acumulado[elem.attrName]) {
    acumulado[elem.attrName]=elem;
    return acumulado;
  }
  
  let latest=new Date(acumulado[elem.attrName].recvTime);
  let current=new Date(elem.recvTime);
  if (current>latest) {
    acumulado[elem.attrName]=elem.attrValue;
  }
  return acumulado;
  
},{});

console.log(datos)

It could be optimized if the date was in "Unix Time" format, being an easily comparable number. So you do not have to create so many Date objects.