Remove Object from multidimensional Array

Question

I´m trying to remove an Object in an array.

The situation is the following.

In the code i generate a new Post object, which i`ll push to an post_array

var field = "Kommentar";
var objectKey = 1;
var new_post_obj = {objectKey: objectKey, field: field, value: new_value, type: "text"};
post_array.push(new_post_obj);

Thats working fine. I do not want to have an new_post_obj in the post_array with the same objectKey and the same field. For that i`d like to remove the post Objects in the post_array which have the same objectKey and field as a new Object i want to Post. And then push the new_post_obj.

For example the post_array has following data:

[
{objectKey: "1", field: "Kommentar1", value: "kommentar123", type: "text"},
{objectKey: "1", field: "Color", value: "red", type: "text"}
]

My new_post_obj has this new Data

{objectKey: "1", field: "Kommentar1", value: "kommentar123456", type: "text"}

Now i need to remove the old data with objectKey: 1 and field: "Kommentar1"

I tried the following code:

post_array = $.grep( post_array, function(n) {
    return (n.field != field && n.objectKey != objectKey);
});

After that i excpect that my post_array has only this value:

{objectKey: "2", field: "Color", value: "red", type: "text"}

But it`s empty. How can i solve this?

Answer 1

You could use .filter to filter out previous items that have the same objectKey and field:

const input = [
  {objectKey: "1", field: "Kommentar1", value: "kommentar123", type: "text"},
  {objectKey: "2", field: "Color", value: "red", type: "text"}
]
const newObj = {objectKey: "1", field: "Kommentar1", value: "kommentar123456", type: "text"};

const output = input
  .filter(({ objectKey, field }) => objectKey !== newObj.objectKey && field !== newObj.field)
  .concat(newObj);
console.log(output);

Answer 2

In general, removing an element from an array is not straightforward, unless it is the last element (in that case you can simply use the pop() function). That's just how arrays work.

The way to remove an element at an arbitrary position is to create another array, containing all elements of the original array, except the element you want to delete. To do that, a simple way is to go through each item in the original array, compare it with the item you want to remove and if it the result of comparison is false, push the item into the results array.

let original = [{objectKey: "1", field: "Kommentar1", value: "kommentar123", type: "text"},
                {objectKey: "2", field: "Color", value: "red", type: "text"}];

let result = [];

for (element of original) {
  if (!(element.objectKey === "1" && element.field === "Kommentar1")) { 
    result.push(element);
  }
}

Now, of course, you would put that in a function, that would take original array and the criterion for deletion as arguments. Something like deleteElement(arr, id, field), but that's easy to implement once you understand what it has to do.

There already is a built in function that does something similar (but is much more powerful), called filter(). You can read about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Answer 3

You could check if the new post is already included before you push it in the array by using some(), e.g.

let posts = [
  { objectKey: "1", field: "1", value: "", type: "text"},
  { objectKey: "2", field: "2", value: "", type: "text"},
  { objectKey: "3", field: "3", value: "", type: "text"}
];

let newPost = { objectKey: "2", field: "2", value: "", type: "text"};

let isAlreadyInserted = posts.some((p) => {
  return p.objectKey === newPost.objectKey && p.filter === newPost.filter;
});

if (!isAlreadyInserted) {
  posts.push(newPost);
}

Codepen demo

Answer 4

If you want to remove the item with the same field you must just to compare in the grep to put the ones that has different value in "field"

Take into account that you must put Kommentar1 in the new field

var post_array = [
{objectKey: "1", field: "Kommentar1", value: "kommentar123", type: "text"},
{objectKey: "1", field: "Color", value: "red", type: "text"}
]

var field = "Kommentar1"
var objectKey = "1"

post_array = $.grep( post_array, function(n) {
    return (n.field != field);
});

console.log(post_array)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 5

Having the posts and the newPost variables you can do all in only one line using Array.prototype.reduce() combined with Spread syntax

post.reduce((a, c) => [...a, c.objectKey === newPost.objectKey && c.field === newPost.field ? c : newPost], []);

Code example:

const posts = [{objectKey: "1", field: "Kommentar1", value: "kommentar123", type: "text"}, {objectKey: "2",field: "Color", value: "red", type: "text"}];
const newPost = {objectKey: "1", field: "Kommentar1", value: "kommentar123456", type: "text"};

const result = posts.reduce((a, c) => [...a, c.objectKey === newPost.objectKey && c.field === newPost.field ? c : newPost], []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }