Reputation: 153

Return all arrays which contains a string within its array

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.

Upvotes: 2

Answers (6)

Yosvel Quintero

Reputation: 19090

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)

Upvotes: 1

EugenSunic

Reputation: 13723

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)

Upvotes: 1

MrCode

Reputation: 64536

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

Upvotes: 2

Mohit Prakash

Reputation: 512

You can use filter method of javascript:

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

arr is the array which you have posted.

Upvotes: 1

JSEvgeny

Reputation: 2750

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

Upvotes: 1

Sudhir Ojha

Reputation: 3305

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

Upvotes: 2

Return all arrays which contains a string within its array

Answers (6)

Related Questions