Вернуть все массивы, которые содержат строку в своем массиве

Question

Я пытаюсь отфильтровать объекты, которые содержат строку среди его массива. У меня есть это внутри массива объектов.

У меня есть это:

[
{      
  articles: {
    id: "1",
    title: "Great food article",
    featured: false,
    paid: false,
    image: img1,
    author: "Chocolate Boy",
    date:"1-2-2020",
    description:
      "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
    tags: [
      "Tech",
      "Food"
    ]
  }
},
{      
    articles: {
      id: "2",
      title: "Good tech article",
      featured: false,
      paid: false,
      image: img2,
      author: "Candy Boy",
      date:"1-2-2020",
      description:
        "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
      tags: [
        "Tech",
        "Adventure"
      ]
    }
  },
  {      
    articles: {
      id: "3",
      title: "Nice adventure article",
      featured: false,
      paid: false,
      image: img3,
      author: "Lollypop Boy",
      date:"1-2-2020",
      description:
        "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
      tags: [
        "Tech",
        "Food",
        "Adventure"
      ]
    }
  },
]

Я хочу вернуть оба объекта, которые содержат "food" в их массиве "tags" Если я сравниваю строка "food".

filterArticles = () =>{
    let{
        articles, tags
    } = this.state

    let tempArticles = [...articles];
    console.log(tempArticles)
    //Making array of arrays of articles tags
    let array1 = [...new Set(tempArticles.map(item => item["tags"]))];
    //Making the array of arrays flat to one dimensional array
    let array2 = [...new Set(array1.flat(1))];
    console.log(array2)
    console.log(tags)

}

Где tempArticles имеет все 3 объекта, а теги имеют значение food, но он возвращает только массив всех 3 тегов в массиве.

Ожидается 1 и 3 объекта.

Помощь с объяснением оценена, поскольку я пытаюсь выяснить это некоторое время.

Answer 1

Вы можете использовать Array.filter(), чтобы отфильтровать массив, и использовать Array.indexOf(), чтобы проверить продукт.

const newArr = arr.filter((item) => ( item.articles.tags.indexOf('Food') > -1 ));

console.log(newArr); // 2 items which have the Food tag

Answer 2

Вы можете использовать Array.prototype.filter () , а затем String.prototype.includes () , чтобы проверить, включена ли строка в массив tags или нет.

var array = [
{      
  articles: {
    id: "1",
    title: "Great food article",
    featured: false,
    paid: false,
    image: '',
    author: "Chocolate Boy",
    date:"1-2-2020",
    description:
      "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
    tags: [
      "Tech",
      "Food"
    ]
  }
},
{      
    articles: {
      id: "2",
      title: "Good tech article",
      featured: false,
      paid: false,
      image: '',
      author: "Candy Boy",
      date:"1-2-2020",
      description:
        "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
      tags: [
        "Tech",
        "Adventure"
      ]
    }
  },
  {      
    articles: {
      id: "3",
      title: "Nice adventure article",
      featured: false,
      paid: false,
      image: '',
      author: "Lollypop Boy",
      date:"1-2-2020",
      description:
        "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
      tags: [
        "Tech",
        "Food",
        "Adventure"
      ]
    }
  }
]

var foodArray = array.filter(value => value.articles.tags.includes('Food'));
console.log(foodArray);

Answer 3

Вы можете использовать Array.prototype.filter () с Array.prototype.include ()

const data = [{ articles: { id: "1", title: "Great food article", featured: false, paid: false, image: 'img1', author: "Chocolate Boy", date: "1-2-2020", description: "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.", tags: ["Tech", "Food"] } }, { articles: { id: "2", title: "Good tech article", featured: false, paid: false, image: 'img2', author: "Candy Boy", date: "1-2-2020", description: "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.", tags: ["Tech", "Adventure"] } }, { articles: { id: "3", title: "Nice adventure article", featured: false, paid: false, image: 'img3', author: "Lollypop Boy", date: "1-2-2020", description: "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.", tags: ["Tech", "Food", "Adventure"] } },]

const result = data.filter(obj => obj.articles.tags.includes('Food'))

console.log(result)

Answer 4

const arr = [{
    articles: {
      id: "1",
      title: "Great food article",
      featured: false,
      paid: false,
      image: 'img1',
      author: "Chocolate Boy",
      date: "1-2-2020",
      description: "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
      tags: [
        "Tech",
        "Food"
      ]
    }
  },
  {
    articles: {
      id: "2",
      title: "Good tech article",
      featured: false,
      paid: false,
      image: 'img2',
      author: "Candy Boy",
      date: "1-2-2020",
      description: "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
      tags: [
        "Tech",
        "Adventure"
      ]
    }
  },
  {
    articles: {
      id: "3",
      title: "Nice adventure article",
      featured: false,
      paid: false,
      image: 'img3',
      author: "Lollypop Boy",
      date: "1-2-2020",
      description: "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
      tags: [
        "Tech",
        "Food",
        "Adventure"
      ]
    }
  },
]

const result= arr.filter(x=>x.articles.tags.includes('Food'))

console.log(result)

Answer 5

Вы можете использовать метод фильтрации javascript:

arr.filter(ob => {return ob.articles.tags.includes("Food")})

arr - это массив, который вы разместили.

Answer 6

Здесь вы go приятель, но замените строки внутри image свойств вашими переменными

const array = [
{      
  articles: {
    id: "1",
    title: "Great food article",
    featured: false,
    paid: false,
    image: "image",
    author: "Chocolate Boy",
    date:"1-2-2020",
    description:
      "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
    tags: [
      "Tech",
      "Food"
    ]
  }
},
{      
    articles: {
      id: "2",
      title: "Good tech article",
      featured: false,
      paid: false,
      image: "iamge",
      author: "Candy Boy",
      date:"1-2-2020",
      description:
        "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
      tags: [
        "Tech",
        "Adventure"
      ]
    }
  },
  {      
    articles: {
      id: "3",
      title: "Nice adventure article",
      featured: false,
      paid: false,
      image: "image",
      author: "Lollypop Boy",
      date:"1-2-2020",
      description:
        "Street art edison bulb gluten-free, tofu try-hard brooklyn tattooed pickled chambray. Actually humblebrag next level, deep v art party wolf tofu direct trade readymade sustainable hell of banjo. Organic authentic subway tile cliche palo santo, street art XOXO dreamcatcher retro sriracha portland air plant kitsch stumptown. Austin small batch squid gastropub. Pabst pug tumblr gochujang offal retro cloud bread bushwick semiotics before they sold out sartorial literally mlkshk. Vaporware hashtag vice, sartorial before they sold out pok pok health goth trust fund cray.",
      tags: [
        "Tech",
        "Food",
        "Adventure"
      ]
    }
  },
];

const filteredArray = array.map(item => item.articles.tags.includes("Food") && item);

console.log(filteredArray);