Update or add new element to array of objects and update array in object if value exists

Question

I'm currently trying to build an addOrUpdate function. Unfortunately I failed several times.

Basically, I have an array of objects. Each object in turn has an array of strings values (and a key valueGroup).

First you have to check if the object exists, if not a new one should be added. If the object already exists, I want to check whether the value I want to insert is already in the object's string array. If not add it. Is it there delete it!

I first tried it functionally via mapper, but I failed completely because I got a double array. Of course, it would be best to solve it completely functionally. Is it possible?

Currently there is no update of the objects. A new object is always inserted, again with an array string containing a new value.

I also find the current code too complicated

I am using Typescript

type SelectedValues = {
    valueGroup: string;
    values: string[];
};

function updateSelectedValues(selectedValues: SelectedValues[], valueGroup: string, value: string): SelectedValues[] {
    // If array empty add first object
    if (selectedValues.length === 0) {
        return [{ valueGroup: valueGroup, values: [value] }];
    } else {
        // look if valueGroup is already there
        const index = selectedValues.findIndex((find) => find.valueGroup === valueGroup);
        if (index === -1) {
            // if no add new valueGroup with first values
            return [...selectedValues, { valueGroup: valueGroup, values: [value] }];
        } else {
            // if valueGroup is there, look if value is already in values
            const findedValues = selectedValues[index];
            if (findedValues.values.includes(value)) {
                // yes, remove value from values
                return [...selectedValues, { ...findedValues, values: findedValues.values.filter((filter) => filter !== value) }];
            } else {
                // no, add value to values
                return [
                    ...selectedValues.filter((object) => object.valueGroup === valueGroup),
                    { ...findedValues, values: [...findedValues.valueGroup, value] },
                ];
            }
        }
    }
}

I always click a button. The button passes the values (valueGroup and value) through the OnClick handler. The array should update itself according to my explanation. Here is an example of how that array could change

//Imagine, after some time we are here. At first it was empty. Two groups were inserted and filled

        type SelectedValues = [
            {
            valueGroup: "valueGroupOne",
            values: ["some", "more", "example", ]
            }, 
            {
            valueGroup: "valueGroupTwo",
            values: ["ddd", "sss", "aaa", ]
            }
            ]
     
    // And new group 
    
     type SelectedValues = [
            {
            valueGroup: "valueGroupOne",
            values: ["some", "more", "example", ]
            }, 
            {
            valueGroup: "valueGroupTwo",
            values: ["ddd", "sss", "aaa", ]
            },
             valueGroup: "valueGroupThree",
            values: ["ssss", "dddsd", "adsdas", ]
            }
            ]
    
    // add to an existing Group new value
    
     type SelectedValues = [
            {
            valueGroup: "valueGroupOne",
            values: ["some", "more", "example","newValueadded" ]
            }, 
            {
            valueGroup: "valueGroupTwo",
            values: ["ddd", "sss", "aaa", ]
            },
             valueGroup: "valueGroupThree",
            values: ["ssss", "dddsd", "adsdas", ]
            }
            ]
    
    // delete from existing Group value
    
     type SelectedValues = [
            {
            valueGroup: "valueGroupOne",
            values: ["some", "more", "example" ]
            }, 
            {
            valueGroup: "valueGroupTwo",
            values: ["ddd", "sss", "aaa", ]
            },
             valueGroup: "valueGroupThree",
            values: ["ssss", "dddsd", "adsdas", ]
            }
            ]

Can you share the original array you try to edit, then we can reproduce your issu and try to fix it ;) — nem0z, Jul 16 '22 at 13:19
It is an empty array from the beginning. Or what do you mean? :) — maxfromgermany, Jul 16 '22 at 13:26
Ok well can you should the format this array should have ? For exemple fill it with a random data — nem0z, Jul 16 '22 at 13:29
@nem0z should I maybe post 5-8 steps so that it is understandable? — maxfromgermany, Jul 16 '22 at 13:35
I think the logic for the very first steps is understandable.It's basically the same, just with an empty array that I'm slowly filling — maxfromgermany, Jul 16 '22 at 13:43

Dean · Accepted Answer · 2022-07-16T14:59:03.567

1

You were already pretty close, just made some small errors like not filtering out the object you want to update from the array. I did also change it to use find instead of findIndex but it does not make a huge difference.

function updateSelectedValues(selectedValues: SelectedValues[], valueGroup: string, value: string): SelectedValues[] {
    // If array empty add first object
    if (selectedValues.length === 0) {
        return [{ valueGroup: valueGroup, values: [value] }];
    } else {
        // look if valueGroup is already there
        const obj = selectedValues.find((find) => find.valueGroup === valueGroup);
        if (!obj) {
            // if no add new valueGroup with first values
            return [...selectedValues, { valueGroup: valueGroup, values: [value] }];
        } else {
            if (obj.values.includes(value)) {
                // yes, remove value from values
                return [...selectedValues.filter((object) => object.valueGroup !== valueGroup), { ...obj, values: obj.values.filter((filter) => filter !== value) }];
            } else {
                // no, add value to values
                return [
                    ...selectedValues.filter((object) => object.valueGroup !== valueGroup),
                    { ...obj, values: [...obj.values, value] },
                ];
            }
        }
    }
}

The above shows where you went wrong in your implementation. However we could simplify it to be this:

function updateSelectedValuesLight(selectedValues: SelectedValues[], valueGroup: string, value: string): SelectedValues[] {
    const obj = selectedValues.find((value) => value.valueGroup === valueGroup);

    if (!obj) return [...selectedValues, {valueGroup, values: [value]}]; 

    if (obj.values.includes(value)) {
        obj.values = [...obj.values.filter(iValue => iValue !== value)];
    } else {
        obj.values = [...obj.values, value];
    }

    return selectedValues;
}

This Playground has some tests to see the functionality.

edited Jul 16 '22 at 14:59

answered Jul 16 '22 at 14:00

Dean

521
3
14

Ok. Three Minutes please :) – maxfromgermany Jul 16 '22 at 14:02
1

Awesome. It is working good praise you! – – maxfromgermany Jul 16 '22 at 14:19
It's not possible to refactor that somehow, is it? to make it nicer? – maxfromgermany Jul 16 '22 at 14:36
it is, i can add it to my answer. I wanted to show with your code where you went wrong – Dean Jul 16 '22 at 14:53
it is added now, with an updated playground. – Dean Jul 16 '22 at 14:59
hmm the values array is not updating. It is staying by one value all the time – maxfromgermany Jul 16 '22 at 15:03
where are you testing it? in the playground it works. i did change the function name to `...Light` for the playground. make sure you factor this in. – Dean Jul 16 '22 at 15:04
I am so confused. Your code seems perfect. Why is the value array not updating in my code – maxfromgermany Jul 16 '22 at 15:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/246491/discussion-between-dean-and-maxfromgermany). – Dean Jul 16 '22 at 15:21
Hey Dean, I finally figured out why your function wasn't working. Basically because of that. https://stackoverflow.com/questions/73032428/react-context-is-calling-my-reducer-two-times-on-every-dispatch?noredirect=1#comment128989710_73032428 The first answer, solves the problem almost immediately. The problem is that somehow your functional function stores the values in the find method and then removes them on the second run. Do you know why? I don't even know if react is your specialty – maxfromgermany Jul 19 '22 at 07:51
The first solution works – maxfromgermany Jul 19 '22 at 07:52
replied in chat – Dean Jul 19 '22 at 11:54

Debug Diva · Answer 2 · 2022-07-16T16:11:51.633

0

You can achieve this with the help of few JavaScript methods :

Array.some() - Used to check if object exist or not based on the key.
Array.forEach() - Used to iterate the original array to add/update the value.
Array.includes() - Used to check if values array contains the value which we want to insert or not.
Array.splice() - Used to remove the value if exist.
Array.push() - Used to push the value in values array if not exist / push the object itself if not exist.

Live Demo :

const arr = [{
  valueGroup: 'Group 1',
  values: ['Value 1', 'Value 2']
}, {
  valueGroup: 'Group 2',
  values: ['Value 3', 'Value 4']
}, {
  valueGroup: 'Group 3',
  values: ['Value 5', 'Value 6']
}];

function updateSelectedValues(inputArr, valueGroup, value) {
  const objectExist = inputArr.some(obj => obj.valueGroup === valueGroup);
  if (objectExist) {
    inputArr.forEach(obj => {
      if (obj.valueGroup === valueGroup) {
        obj.values.includes(value) ?
          obj.values.splice(obj.values.indexOf(value), 1) : obj.values.push(value)
      }
    })
  } else {
    arr.push({
      valueGroup: valueGroup,
      values: [value]
    });
  }
  return arr;
}

const result = updateSelectedValues(arr, 'Group 2', 'Value 4');

console.log(result);

edited Jul 16 '22 at 16:11

answered Jul 16 '22 at 13:50

Debug Diva

26,058
13
70
123

hmm the values string array are not updating, if I put the logic in my function – maxfromgermany Jul 16 '22 at 13:57
@maxfromgermany Are you getting any errors ? Is your `searchObj` containing the same format as mine ? – Debug Diva Jul 16 '22 at 14:05
I am not sure yet, if it is important, but these are the paramters of my funtction: (selectedValues: SelectedValues[], valueGroup: string, value: string) you are using the whole object – maxfromgermany Jul 16 '22 at 14:24
what should I return, if I put your code in my function? – maxfromgermany Jul 16 '22 at 14:29
Your code, is going to work, with my situation. Your types are wrong – maxfromgermany Jul 16 '22 at 14:32
@maxfromgermany Now I got the idea what you actually want. I updated my answer and it is working perfectly now. – Debug Diva Jul 16 '22 at 16:12

nem0z · Answer 3 · 2022-07-16T14:55:42.637

0

I wrote a function that takes 2 parameters (array with SelectedValues && object with data to add/edit/remove) :

let data = [{ valueGroup: "valueGroupOne", values: ["some", "more", "example", ] }, { valueGroup: "valueGroupTwo", values: ["ddd", "sss", "aaa", ] } ];

function addOrEdit(arr, valueGroup, value) {
    arr = [...arr];
    let valueGroupIdx = arr.findIndex(el => el.valueGroup == valueGroup);

    if(valueGroupIdx > -1) {
        if(arr.at(valueGroupIdx).values.includes(value)) {
            arr[valueGroupIdx].values.splice(arr[valueGroupIdx].values.indexOf(value), 1)
        } else {
            arr[valueGroupIdx].values.push(value)
        } 

    } else {
        arr.push({
            'valueGroup': valueGroup,
            'values': [value],
        });
    }

    return arr;
}

data = addOrEdit(data, 'valueGroupTwo', 'sss');
data = addOrEdit(data, 'valueGroupTwo', 'aaa');
data = addOrEdit(data, 'valueGroupTwo', 'test');
data = addOrEdit(data, 'valueGroupThree', 'one');
data = addOrEdit(data, 'valueGroupThree', 'two');
data = addOrEdit(data, 'valueGroupThree', 'one');


console.log(data);

edited Jul 16 '22 at 14:55

answered Jul 16 '22 at 13:58

nem0z

1,060
1
4
17

Ok Will try that out.3 minues please – maxfromgermany Jul 16 '22 at 13:59
I am not sure yet, if it is important, but these are the paramters of my funtction: `(selectedValues: SelectedValues[], valueGroup: string, value: string)` you are using the whole object – maxfromgermany Jul 16 '22 at 14:01
I will try this out as well. One sec please – maxfromgermany Jul 16 '22 at 14:19
In your post. Is values a string[] ? – maxfromgermany Jul 16 '22 at 14:23
Yes it is an array of strings – nem0z Jul 16 '22 at 14:24
But it can be anything else inside the array (exepted object / array) – nem0z Jul 16 '22 at 14:24
It should be a string – maxfromgermany Jul 16 '22 at 14:24
I don't use TypeScript but if you want you can restrict it to string[] and it will works – nem0z Jul 16 '22 at 14:26
your idea is based on `value` being an array – maxfromgermany Jul 16 '22 at 14:27
I cant do that in my code `!values.includes(v)` cause value not values need to bee a string – maxfromgermany Jul 16 '22 at 14:28
Ok, I miss understood the probleme, I edited my code, now value is a simple string ;) – nem0z Jul 16 '22 at 14:37
hmmm I dont see the problem. But the values array is emty all the time – maxfromgermany Jul 16 '22 at 14:46
hmm, I believe you. You are make return arr at the end or? – maxfromgermany Jul 16 '22 at 14:49
It doesn't return, it edit `arr` but for sure you can add `return arr`at the end. just note that it will change the logic outside the function as you will need to store the new value in a variable each time you call `addOrEdit` – nem0z Jul 16 '22 at 14:52
I need to return it. Is that important? So i need to return the updated array – maxfromgermany Jul 16 '22 at 14:53
I just edied ;) – nem0z Jul 16 '22 at 14:55
Somehow that part is just not working arr[valueGroupIdx].values.push(value) – maxfromgermany Jul 16 '22 at 14:58
Which error does it throw ? – nem0z Jul 16 '22 at 15:10
It is not an error. The value string[] is not updating – maxfromgermany Jul 16 '22 at 15:19
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/246492/discussion-between-maxfromgermany-and-nem0z). – maxfromgermany Jul 16 '22 at 15:22

Update or add new element to array of objects and update array in object if value exists

3 Answers3

Linked