Фильтрация нескольких тегов

Question

Итак, у меня есть это как мои данные. Я хочу иметь возможность получить все теги без повторения. Можно ли как-нибудь получить это из JSON с помощью Angular?

var data = [
  { "id" : 1, 
     "title" : "title 1", 
     "description" : "Lorem Ipsum.", 
     "tags" : [
        { "tag": "facebook" },
        { "tag": "twitter" }
     ]
  }, 
  { "id" : 2, 
     "title" : "title 2", 
     "description" : "Lorem Ipsum.", 
     "tags" : [
        { "tag": "google" },
        { "tag": "twitter" }
     ]
  },
  { "id" : 3, 
     "title" : "title 3", 
     "description" : "Lorem Ipsum.", 
     "tags" : [
        { "tag": "reddit" },
        { "tag": "instagram" }
     ]
  }, 
  { "id" : 4, 
     "title" : "title 4", 
     "description" : "Lorem Ipsum.", 
     "tags" : [
        { "tag": "reddit" },
        { "tag": "9gag" }
     ]
  }
]

Я ожидаю, что вывод кода будет следующим: var tags = ["facebook", "twitter", "google", "reddit"," instagram "," 9gag "]

Answer 1

А есть такой обычный простой метод. Использование forEach и findIndex.

var data = [
  {
    "id": 1,
    "title": "title 1",
    "description": "Lorem Ipsum.",
    "tags": [
      { "tag": "facebook" },
      { "tag": "twitter" }
    ]
  },
  {
    "id": 2,
    "title": "title 2",
    "description": "Lorem Ipsum.",
    "tags": [
      { "tag": "google" },
      { "tag": "twitter" }
    ]
  },
  {
    "id": 3,
    "title": "title 3",
    "description": "Lorem Ipsum.",
    "tags": [
      { "tag": "reddit" },
      { "tag": "instagram" }
    ]
  },
  {
    "id": 4,
    "title": "title 4",
    "description": "Lorem Ipsum.",
    "tags": [
      { "tag": "reddit" },
      { "tag": "9gag" }
    ]
  }
];



let uniqTags = getUniqTags(data);
console.log(uniqTags);

function getUniqTags(data) {
  let res = [];
  data.forEach(d => {
    d.tags.forEach(f => {
      let fIndex = res.findIndex(r => r === f.tag);
      if (fIndex === -1) {
        res.push(f.tag)
      }
    });
  });
  return res;
}

Answer 2

Я хотел бы поделиться своим решением, так как некоторые решения используют функции, которые поддерживаются не всеми браузерами. Вот как уменьшить ваш массив до массива строк с информацией о вашем теге

var data = [{"id": 1, "title": "title 1", "description": "Lorem Ipsum.", "tags": [{ "tag":"facebook" }, { "tag": "twitter" } ]},{"id": 2,"title": "title 2","description": "Lorem Ipsum.","tags": [{ "tag": "google" }, { "tag": "twitter" } ]},{"id": 3,"title": "title 3","description": "Lorem Ipsum.","tags": [ { "tag": "reddit" }, { "tag": "instagram" } ]},{ "id": 4,"title": "title 4","description": "Lorem Ipsum.","tags": [{ "tag":"reddit" },{ "tag":"9gag" }]}
];
   var result= data.map( (d)=> d.tags  )
         .reduce((a,b)=> a.concat(b),[])
         .reduce((e,f)=> { 
              if (!e.join().includes(f.tag)){  
                 e.push(f.tag); 
              } return e;  } 
         ,[]);
         
    console.log(result);

Answer 3

Вы можете использовать flatMap () с map (). И использовать Set () для удаления дубликатов.

var data = [{
    "id": 1,
    "title": "title 1",
    "description": "Lorem Ipsum.",
    "tags": [{
        "tag": "facebook"
      },
      {
        "tag": "twitter"
      }
    ]
  },
  {
    "id": 2,
    "title": "title 2",
    "description": "Lorem Ipsum.",
    "tags": [{
        "tag": "google"
      },
      {
        "tag": "twitter"
      }
    ]
  },
  {
    "id": 3,
    "title": "title 3",
    "description": "Lorem Ipsum.",
    "tags": [{
        "tag": "reddit"
      },
      {
        "tag": "instagram"
      }
    ]
  },
  {
    "id": 4,
    "title": "title 4",
    "description": "Lorem Ipsum.",
    "tags": [{
        "tag": "reddit"
      },
      {
        "tag": "9gag"
      }
    ]
  }
]

let result = new Set(data.flatMap(ele => [...ele.tags]).map(el => el.tag));
console.log([...result])

Answer 4

Вы можете использовать Set с операцией flatMap().

Операция flatMap() будет собирать все теги из различных объектов,во время сбора их в Set будут удалены дубликаты.

const tags = [...new Set(data.flatMap(d => d.tags.map(t => t.tag)))];

---

Полный фрагмент:

const data = [{
    "id": 1,
    "title": "title 1",
    "description": "Lorem Ipsum.",
    "tags": [{
        "tag": "facebook"
      },
      {
        "tag": "twitter"
      }
    ]
  },
  {
    "id": 2,
    "title": "title 2",
    "description": "Lorem Ipsum.",
    "tags": [{
        "tag": "google"
      },
      {
        "tag": "twitter"
      }
    ]
  },
  {
    "id": 3,
    "title": "title 3",
    "description": "Lorem Ipsum.",
    "tags": [{
        "tag": "reddit"
      },
      {
        "tag": "instagram"
      }
    ]
  },
  {
    "id": 4,
    "title": "title 4",
    "description": "Lorem Ipsum.",
    "tags": [{
        "tag": "reddit"
      },
      {
        "tag": "9gag"
      }
    ]
  }
];

const tags = [...new Set(data.flatMap(d => d.tags.map(t => t.tag)))];

console.log(tags);