Return all arrays which contains a string within its array

user_3778272 0
Viewed 68

I am trying to filter out the objects which contains a string among on of its array. I have it inside an array of objects.

I have this:

[
{      
  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"
      ]
    }
  },
]

I want to return both the objects which contains "food" in their "tags" array If I compare a string of "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)

}

Where tempArticles has all the 3 objects and tags has a value of food but its only returning an array of all the 3 tags in an array.

Expecting 1 and the 3 objects.

Help with explanation appreciated as I am trying to figure it out for a while.

object arrays javascript
6 Answers

You can use Array.prototype.filter() and then String.prototype.includes() to check if string is included in tags array or not.

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);

user_66822740

You can use Array.filter() to filter the array and use Array.indexOf() to check for the Food item.

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

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

Here you go buddy, but replace strings inside image properties with your variables

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);

user_61313680

You can use filter method of javascript:

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

arr is the array which you have posted.

user_66595230 

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)

user_29519330

You can use Array.prototype.filter() with Array.prototype.includes()

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)

user_19325520
Related