If object value exists in array, add to existing object

Question

I have a function component that generates a linear chart in react based on an array of objects.

The data I'm pulling from the API looks like this:

    {
        "_id": "604face09b305032586fe235",
        "username": "Demo",
        "description": "0",
        "duration": 0,
        "date": "2021-03-15T18:52:10.749Z",
        "createdAt": "2021-03-15T18:52:16.684Z",
        "updatedAt": "2021-03-15T18:52:16.684Z",
        "__v": 0

    }

My code to generate the chart data is:

// GET Exercises
useEffect(() => {
    axios.get("http://localhost:5000/exercises")
        .then((result) => {
            setIsLoaded(true);
            setItems(result.data);
            console.log(result.data)
        })
        .catch((error) => {
            setIsLoaded(true);
            setError(error);
        })
}, [])

//  chartdata
useEffect(() => {
    const chartArray = items.map((item) => {

        const container = {};
        container.label = item.username;
        container.data = [[stripDate(item.date), item.duration]]

        return container;

    });
    setXp(chartArray);
}, [items])

However, the API could return multiple objects with "username": "Demo", what I want is that if the username value already exists in my chart data I want to update that container.data array with another array.

Current outcome:

{
    "label": "Demo",
    "data": [[15, "2021-03-15"]]
},

{
    "label": "Demo",
    "data": [[45, "2021-03-17"]]
}

What I want to achieve:

{
    "label": "Demo",
    "data": [[15, "2021-03-15"], [45, "2021-03-17"]]
}

Any help or guidance is appreciated.

Hassan Imam · Accepted Answer · 2021-03-16 17:05:59Z

1

You need to group your data based on the username value using array#reduce in an object accumulator. For repeated username push new data in the array. Then get the values from this accumulator using Object.values().

useEffect(() => {
  const chartArray = Object.values(items.reduce((r, o) => {
    r[o.username] = r[o.username] || { label: o.username, data: []};
    r[o.username].data.push([o.duration, stripDate(o.date)]);
    return r;
  },{}));
  setXp(chartArray);
}, [items])

edited Mar 16, 2021 at 17:05

answered Mar 16, 2021 at 17:00

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

If object value exists in array, add to existing object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related