Home / Questions / 135743
Accepted
Manolait
Asked: 2020-02-03 06:04:49 +0800 CST 2020-02-03 06:04:49 +0800 CST

Convert Object to work with Angular2

  • 772

I am working with Angular dos 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 in my front I have designed this:

A class in charge of the data model with the three attributes.

In my component I have declared this data:

miData: any = {};

Assigning the response 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 to not have an object? before I did it with a for and nesting if checking the name but this makes the load very slow.

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

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

Greetings and thank you.

javascript

1 Answers

  1. Best Answer

    Using the response you received before (an array with all the data) you could use Array.reduce to keep the newest from each source (attrName). In a single pass you reduce the array to a few attributes, so it will work pretty 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. That way you wouldn't have to create as many Date objects.

    • 3