Array filter with array loop inside

Question

I have two arrays, one with existing tags of book and another with searched results by user input value of tag to add and I need to show user tags to add that doesn't already exist in tags:

tags = [{id:1, name:'x'},{id:2, name:'y'},{id:5, name:'z'}]
search = [{id:2, name:'y'},{id:5, name:'z'},{id:15, name:'s'}]

How can I make a new array that will have search id's and other data that doesn't exist in tags array?

This is how it's worked for me in the end:

let newArray= search
  .filter(({ id }) => {
    return !tags.some(tag => {
      return tag.id == id
    })
  })
  .map(tag => {
    return (
      <Button
        key={tag.id}
      >
        {tag.name}
      </Button>
    )
  })

Use `indexOf` to check whether the current tags item you are looking at, is contained in search …? — 04FS, Mar 11 '19 at 11:21
Possible duplicate of [How to get the difference between two arrays of objects in JavaScript](https://stackoverflow.com/questions/21987909/how-to-get-the-difference-between-two-arrays-of-objects-in-javascript) and [check the difference between two arrays of objects in javascript](https://stackoverflow.com/questions/50648091) — adiga, Mar 11 '19 at 11:27

ellipsis · Answer 1 · 2019-03-11T11:35:23.170

2

Using map get all the values in the object in the tags array. Run a filter on the search array and if the id is not present in the above created array , return it

var tags = [{id:1, name:'x'},{id:2, name:'y'},{id:5, name:'z'}]
var search = [{id:2, name:'y'},{id:5, name:'z'},{id:15, name:'s'}]
console.log(search.filter(({id,name})=>!tags.find(e=>e.id==id && e.name==name)))

edited Mar 11 '19 at 11:35

answered Mar 11 '19 at 11:22

ellipsis

12,049
2
17
33

updated question, there is many values in one item, so i need to save them. – ZiiMakc Mar 11 '19 at 11:24

jo_va · Answer 2 · 2019-03-11T12:45:22.680

1

You can use filter and find or some to do it in a single line:

const tags = [{id:1},{id:2},{id:5}];
const search = [{id:2},{id:5},{id:15}];

const result1 = search.filter(({ id }) => !tags.some(tag => tag.id === id));
const result2 = search.filter(({ id }) => !tags.find(tag => tag.id === id));

console.log(result1, result2);

If you use an older version of JavaScript, here is a version without arrow functions and destructuring:

const tags = [{id:1},{id:2},{id:5}];
const search = [{id:2},{id:5},{id:15}];

const result1 = search.filter(search => { return !tags.some(tag => { return tag.id === search.id; }); });
const result2 = search.filter(search => { return !tags.find(tag => { return tag.id === search.id; }); });

console.log(result1, result2);

edited Mar 11 '19 at 12:45

answered Mar 11 '19 at 11:22

jo_va

13,504
3
23
47

1

You can use `some` instead of `find` – adiga Mar 11 '19 at 11:29
@adiga, you are totally right, I will update the answer – jo_va Mar 11 '19 at 11:30
you need to add return for .some – ZiiMakc Mar 11 '19 at 12:29
@RTW, no you don't need that as there is no block around it so the return is implicit – jo_va Mar 11 '19 at 12:30
without return it doesn't work for me for some reason. Added worked version in question. – ZiiMakc Mar 11 '19 at 12:41
@RTW, I added an example without arrow function, that should work in your case – jo_va Mar 11 '19 at 12:45

score 1 · Answer 3 · answered Mar 11 '19 at 11:30

I assume that the desired result in the example is {id:15}, since 15 is the only value in search that is not present in tags.

In that case, you should filter the search array, rather than the tags one. The condition is that the searched is not found in tags. The find method comes to the rescue here.

The actual code may look like this

let filtered = search.filter(searched =>
    !tags.find(tagged => tagged.id === searched.id)
)

Hope it helps - Carlos

ye, but i used some instead of find – ZiiMakc Mar 11 '19 at 12:43 — ZiiMakc, Mar 11 '19 at 12:43

GBrandt · Answer 4 · 2019-03-11T11:26:03.147

0

I think what you want is:

search.filter(searchTag => tags.every(tag => tag.id != searchTag.id))

edited Mar 11 '19 at 11:26

answered Mar 11 '19 at 11:21

GBrandt

685
4
11

`!arr.some(x => x === anything)` is equivalent to `arr.every(x => x !== anything)` and the latter is easier to read because it doesn't rely on keeping the `!` in mind for the entire rest of the expression. – VLAZ Mar 11 '19 at 11:23

score 0 · Accepted Answer · answered Mar 11 '19 at 12:40

This is how it works for me:

let newArray= search
      .filter(({ id }) => {
        return !tags.some(tag => {
          return tag.id == id
        })
      })
      .map(tag => {
        return (
          <Button
            key={tag.id}
          >
            {tag.name}
          </Button>
        )
      })

Array filter with array loop inside

5 Answers5