How can I put a desired value in an object array based on a condition?-CodePudding

I have an array object value called tags.

    tags = [
        {
            "tagId": 12,
            "value": 24.2,
            "time": "2022-10-12T02:00:00Z"
        },
        {
            "tagId": 12,
            "value": 25,
            "time": "2022-10-12T06:00:00Z"
        },
        {
            "tagId": 12,
            "value": 28,
            "time": "2022-10-12T09:00:00Z"
        },

        {
            "tagId": 13,
            "value": 23,
            "time": "2022-10-12T02:00:00Z"
        },
        {
            "tagId": 13,
            "value": 23.5,
            "time": "2022-10-12T06:00:00Z"
        },
        {
            "tagId": 13,
            "value": 23.3,
            "time": "2022-10-12T09:00:00Z"
        },


        {
            "tagId": 14,
            "value": 24,
            "time": "2022-10-12T02:00:00Z"
        },
        {
            "tagId": 14,
            "value": 25.4,
            "time": "2022-10-12T06:00:00Z"
        },
        {
            "tagId": 14,
            "value": 26.4,
            "time": "2022-10-12T09:00:00Z"
        },
    ]

When I execute the renderChartControl function, I want to put the value I want in the renderData variable.

I want to compare the Atempid and Ahumid values with the e.tagId value and put the value corresponding to the condition in each property value.

    Atempid = 12;

    Ahumid = 13;

    groundtemp = 14;


    const renderChartControl = () => {

    let renderData = tags.map((e) => {


        return {
            label: Atempid === e.tagId ? 'temp' : Ahumid === e.tagId ? 'hum' : 'groundtemp',

            data: e.value,

            borderColor: Atempid === e.tagId ? 'red' : Ahumid === e.tagId ? 'orange' : 'yellow',

            backgroundColor: Atempid === e.tagId ? 'red' : Ahumid === e.tagId ? 'orange' : 'yellow',
        }
    })

    }

this is what i want answer

expected answer =

    rederData = [
        {
            "label": "temp",
            "data": [
                24.2,
                25,
                28
            ],
            "borderColor": "red",
            "backgroundColor": "red"
        },
        {
            "label": "hum",
            "data": [
                23,
                23.5,
                23.3
            ],
            "borderColor": "orange",
            "backgroundColor": "orange"
        },

        {
            "label": "groundtemp",
            "data": [
                24,
                25.4,
                26.4,
            ],
            "borderColor": "yellow",
            "backgroundColor": "yellow"
        }

    ]

but if i use my code this answer comes out

this is not answer what i want

    rederData[
        {
            "label": "temp",
            "data": 24.2,
            "borderColor": "red",
            "backgroundColor": "red"
        },
        {
            "label": "temp",
            "data": 25,
            "borderColor": "red",
            "backgroundColor": "red"
        },
        {
            "label": "temp",
            "data": 28,
            "borderColor": "orange",
            "backgroundColor": "#01C38D"
        },

        {
            "label": "hum",
            "data": 23,
            "borderColor": "orange",
            "backgroundColor": "orange"
        },
        {
            "label": "hum",
            "data": 23.5,
            "borderColor": "orange",
            "backgroundColor": "orange"
        },
        {
            "label": "hum",
            "data": 23.3,
            "borderColor": "orange",
            "backgroundColor": "orange"
        },


        {
            "label": "groundtemp",
            "data": 24,
            "borderColor": "yellow",
            "backgroundColor": "yellow"
        },
        {
            "label": "groundtemp",
            "data": 25.4,
            "borderColor": "yellow",
            "backgroundColor": "yellow"
        },
        {
            "label": "groundtemp",
            "data": 26.4,
            "borderColor": "yellow",
            "backgroundColor": "yellow"
        }

    ]

How can i fix my code??

CodePudding user response：

You cannot do this using .map(..), you can do it using .reduce(..), here is an example:

const tags = [{ "tagId": 12,"value": 24.2,"time": "2022-10-12T02:00:00Z"}, {"tagId": 12,"value": 25,"time": "2022-10-12T06:00:00Z"}, {"tagId": 12,"value": 28,"time": "2022-10-12T09:00:00Z"}, {"tagId": 13,"value": 23,"time": "2022-10-12T02:00:00Z"}, {"tagId": 13,"value": 23.5,"time": "2022-10-12T06:00:00Z"}, {"tagId": 13,"value": 23.3,"time": "2022-10-12T09:00:00Z"}, {"tagId": 14,"value": 24,"time": "2022-10-12T02:00:00Z"}, {"tagId": 14,"value": 25.4,"time": "2022-10-12T06:00:00Z"}, {"tagId": 14,"value": 26.4,"time": "2022-10-12T09:00:00Z"}];

const Atempid = 12;
const Ahumid = 13;
const groundtemp = 14;

const result = tags.reduce((a, c) => {
  const label = c.tagId === Atempid ? 'temp' : (c.tagId === Ahumid ? 'hum' : 'groundtemp');
  const found = a.find((o) => o.label === label);
  if (found) {
    found.data.push(c.value);
  } else {
    const color = c.tagId === Atempid ? 'red' : (c.tagId === Ahumid ? 'orange' : 'yellow');
    a.push({
      label,
      data: [c.value],
      borderColor: color,
      backgroundColor: color
    });
  }
  return a;
}, []);

console.log(result);

What this does is to go through all the tags, check if there is already an entry in the result array (the a variable, the accumulator) for a specific label, if that is the case, add this tag's value value to the data array, if not, create a new entry in the result array.

CodePudding user response：

You can do this by updating your renderChartControl function to this.

const renderChartControl = () => {
    let items = {};
    tags.forEach(e => {
        if(!items[e.tagId]) {
            items[e.tagId] = {
                label: Atempid === e.tagId ? 'temp' : Ahumid === e.tagId ? 'hum' : 'groundtemp',
                data: [e.value],
                borderColor: Atempid === e.tagId ? 'red' : Ahumid === e.tagId ? 'orange' : 'yellow',
                backgroundColor: Atempid === e.tagId ? 'red' : Ahumid === e.tagId ? 'orange' : 'yellow'
            }
        } else {
            items[e.tagId].data.push(e.value);
        }
    })
    return Object.values(items);
}