How to filter Array in an object

Question

I have these arrays in my object and I need to filter tags array with a specific value. I am not sure how to achieve this

const obj = [
    {
        "slug": "add-an-aggregate-rating-feature-to-your-website",
        "frontmatter": {
            "title": "Add An Aggregate Rating Feature To Your Website",
            "metaTitle": "Add An Aggregate Rating Feature To Your Website",
            "tags": [
                "structured-data",
                "aggregate-rating",
                "rich-text"
            ]
        }
    },
    {
        "slug": "step-by-step-guide-to-become-a-full-stack-web-developer-in-2023",
        "frontmatter": {
            "title": "Step-by-Step Guide: How to Become a Full Stack Web Developer in 2023",
            "metaTitle": "Step-by-Step Guide: How to Become a Full Stack Web Developer"
            "tags": [
                "article",
                "roadmap"
            ]
        }
    },
    {
        "slug": "what-is-dall-e",
        "frontmatter": {
            "title": "What is DALL-E? A world changing technology?",
            "metaTitle": "What is DALL-E? A world changing technology?"
            "tags": [
                "technology",
                "article",
                "openai"
            ]
        }
    }
]

// List objects having article tag only
var newArray = obj.filter(function (el){
    return el.frontmatter.tags.filter(function (el2){
         el2 == "article"
    })
})
console.log(newArray)

If only `tags` should be filtered, why do you filter the `obj` as well? — Konrad, Jan 14 '23 at 15:45
duplicates: [Filter nested array in object array by array of values](https://stackoverflow.com/questions/51650390/filter-nested-array-in-object-array-by-array-of-values) and [Filtering array of objects with arrays based on nested value](https://stackoverflow.com/questions/38375646/filtering-array-of-objects-with-arrays-based-on-nested-value) — pilchard, Jan 14 '23 at 15:46

score 2 · Answer 1 · answered Jan 14 '23 at 15:49

Use filter and includes for an elegant one-liner

const obj = [
    {
        "slug": "add-an-aggregate-rating-feature-to-your-website",
        "frontmatter": {
            "title": "Add An Aggregate Rating Feature To Your Website",
            "metaTitle": "Add An Aggregate Rating Feature To Your Website",
            "tags": [
                "structured-data",
                "aggregate-rating",
                "rich-text"
            ]
        }
    },
    {
        "slug": "step-by-step-guide-to-become-a-full-stack-web-developer-in-2023",
        "frontmatter": {
            "title": "Step-by-Step Guide: How to Become a Full Stack Web Developer in 2023",
            "metaTitle": "Step-by-Step Guide: How to Become a Full Stack Web Developer",
            "tags": [
                "article",
                "roadmap"
            ]
        }
    },
    {
        "slug": "what-is-dall-e",
        "frontmatter": {
            "title": "What is DALL-E? A world changing technology?",
            "metaTitle": "What is DALL-E? A world changing technology?",
            "tags": [
                "technology",
                "article",
                "openai"
            ]
        }
    }
];

const newArray = obj.filter(el => el.frontmatter.tags.includes("article"));
console.log(newArray);

score 2 · Accepted Answer · answered Jan 14 '23 at 15:51

I'm pretty sure that you want to filter the obj array

const newArray = obj.filter((el) =>
  el.frontmatter.tags.includes("article")
)

const obj = [{
    "slug": "add-an-aggregate-rating-feature-to-your-website",
    "frontmatter": {
      "title": "Add An Aggregate Rating Feature To Your Website",
      "metaTitle": "Add An Aggregate Rating Feature To Your Website",
      "tags": [
        "structured-data",
        "aggregate-rating",
        "rich-text"
      ]
    }
  },
  {
    "slug": "step-by-step-guide-to-become-a-full-stack-web-developer-in-2023",
    "frontmatter": {
      "title": "Step-by-Step Guide: How to Become a Full Stack Web Developer in 2023",
      "metaTitle": "Step-by-Step Guide: How to Become a Full Stack Web Developer",
      "tags": [
        "article",
        "roadmap"
      ]
    }
  },
  {
    "slug": "what-is-dall-e",
    "frontmatter": {
      "title": "What is DALL-E? A world changing technology?",
      "metaTitle": "What is DALL-E? A world changing technology?",
      "tags": [
        "technology",
        "article",
        "openai"
      ]
    }
  }
]

const newArray = obj.filter((el) =>
  el.frontmatter.tags.includes("article")
)

console.log(newArray)

Srikanth · Answer 3 · 2023-01-14T16:00:14.457

1

Hope this helps..

const blogs = [
  {
    "slug": "add-an-aggregate-rating-feature-to-your-website",
    "frontmatter": {
      "title": "Add An Aggregate Rating Feature To Your Website",
      "metaTitle": "Add An Aggregate Rating Feature To Your Website",
      "tags": [
        "structured-data",
        "aggregate-rating",
        "rich-text"
      ]
    }
  },
  {
    "slug": "step-by-step-guide-to-become-a-full-stack-web-developer-in-2023",
    "frontmatter": {
      "title": "Step-by-Step Guide: How to Become a Full Stack Web Developer in 2023",
      "metaTitle": "Step-by-Step Guide: How to Become a Full Stack Web Developer",
      "tags": [
        "article",
        "roadmap"
      ]
    }
  },
  {
    "slug": "what-is-dall-e",
    "frontmatter": {
      "title": "What is DALL-E? A world changing technology?",
      "metaTitle": "What is DALL-E? A world changing technology?",
      "tags": [
        "technology",
        "article",
        "openai"
      ]
    }
  }
]

// List objects having article tag only
const blogsWithTag = blogs.filter((blog) => 
    blog.frontmatter?.tags.includes("article"))

edited Jan 14 '23 at 16:00

answered Jan 14 '23 at 15:52

Srikanth

91
7

1

Why `?.` everywhere? – Konrad Jan 14 '23 at 15:53
1

I mean, it makes sense, if `blogs` is empty, actually filter won't even run if its empty so yeah pointless – zanderwar Jan 14 '23 at 15:54
Actually, it should be: const blogsWithTag = blogs.filter((blog) => blog.frontmatter?.tags.includes("article")) thanks! :) – Srikanth Jan 14 '23 at 15:58
It can be yeah, but you shouldn't need it because you shouldn't need to doubt the existence of `frontmatter` unless something else is very wrong :) – zanderwar Jan 14 '23 at 16:01
Since the `type` of blog is not defined. It came automatically to me (just for safety.. due to muscle memory! :D) – Srikanth Jan 14 '23 at 16:03
Just before posting my answer, I somehow missed both of your answers .. Either Stackoverflow takes a bit a time to display answers OR my network is not that great! – Srikanth Jan 14 '23 at 16:06

How to filter Array in an object

3 Answers3

Linked

Related