How to remove duplicate item from arrays in json object with jQuery

Question

Given a JSON object with arrays, I'm able to loop through and display each of the tags from each object, but there are duplicate tags in each. How can I loop through and check that a tag doesn't already exist, then push it onto the array? I've tried creating an empty array, looping through and pushing each item into a new array, but this doesn't seem to be working correctly. In the end, I should have an array of tags that I can display in a list, where there are no duplicate tags.

jQuery

$.each( this.data, function(key,value){
  $.each( value.tags, function(i, j){
    console.log("TAGS", j);
    var array = [];
    var items = array.push(j);
    console.log("ITEMS ARRAY", array);
    $("ul.tag-list").append("<li><span class='tag is-link'>" + j + "</span></li>");
  });
});

JSON Object

 [
  {
    "tags": ["melodrama", "romance", "time travel"]
  },
  {
    "tags": [
      "melodrama",
      "historical",
      "romance",
      "war",
      "fantasy",
      "period drama",
      "based on a novel"
    ]
  },
  {
    "tags": [
      "mystery",
      "thriller",
      "action",
      "crime",
      "comedy",
      "feature film"
    ]
  },
  {
    "tags": ["romantic comedy", "romance", "fantasy"],
  },
  {
    "tags": ["romantic comedy", "romance", "comedy"],
  },
  {
    "tags": ["romance", "comedy", "drama", "romantic comedy"]
  },
  {
    "tags": ["romance", "medical"]
  },
  {
    "tags": [
      "romantic comedy",
      "comedy",
      "family relationships",
      "Staff Favorites"
    ]
  },
  {
    "tags": ["romantic comedy", "romance", "fantasy", "based on a manga"]
  },
  {
    "tags": ["romance"]
  }
]

Partial example of current results:

I need to only have each tag show once, for example (melodrama, romance, etc).

Do you need a single `tags` object with unique tags? Then, you can use `Array.from(new Set(arr.reduce((r,o) => r.concat(o.tags),[])))` — Hassan Imam, Feb 18 '18 at 17:06
There are many, many questions about getting duplicates out of an array. See [this question and its answers](https://stackoverflow.com/q/1960473/215552). Also, I'm not seeing any duplicates in your arrays. — Heretic Monkey, Feb 18 '18 at 17:08
Possible duplicate of [Remove duplicate values from JS array](https://stackoverflow.com/questions/9229645/remove-duplicate-values-from-js-array) — Wild Beard, Feb 18 '18 at 17:09
Possible duplicate of [How to get unique values in an array](https://stackoverflow.com/questions/11246758/how-to-get-unique-values-in-an-array) — Hassan Imam, Feb 18 '18 at 17:16
I've updated my question with a screenshot of the current state. I need to only have each tag (which has duplicates in the list) show once. — Matt, Feb 18 '18 at 17:20

eicksl · Accepted Answer · 2018-02-18T20:04:38.410

0

You can concatenate all the tags arrays and then convert it to a set and back again to get all unique tags:

let tags = [];
for (const i of data) {
    tags = tags.concat(i.tags);  
}
tags = [...new Set(tags)];

// tags is now an array of all unique tags

edited Feb 18 '18 at 20:04

answered Feb 18 '18 at 17:31

eicksl

852
8
8

thanks. Turns out the following worked: `this.tags = [...new Set([].concat.apply([], data.map(item => item.tags)))].sort();` – Matt Feb 18 '18 at 19:15

How to remove duplicate item from arrays in json object with jQuery

1 Answers1