Displaying Objects in an Array VueJS

Question

So I am using a JSON object that looks something like this:

data: [
  {
    title: "Post Title One",
    categories: {
      data: [
        {
          id: 1,
          name: "Category Name 1"
        }
      ]
    }
  },
  {
    title: "Post Title Two",
    categories: {
      data: [
        {
          id: 2,
          name: "Category Name 1"
        },
        {
          id: 3,
          name: "Category Name 2"
        }
      ]
    }
  }
]

and I want to grab all the categories for each post and display them using Vue. So what I have currently is:

<div v-for="post in posts">
   <div>{{ post.categories.data }}</div>
</div>

In that {{ post.categories.data }} I am trying to display the category name from the JSON object. When I use what I have above the whole array is displayed in the div. When I try to do something like

{{ post.categories.data.name }}

or

{{ post.categories.data[0].name }}

I don't display the name of the category. I would really like to display the name of every category a post has, but can't seem to get it to display correctly.

EDIT: Also posts is the data property I am using in VueJS and am setting the JSON object to become that property.

Did you try "post.categories.data.map(d => d.name).join()" ? This will display all category names together — Nitish Narang
– Nitish Narang, Commented Oct 26, 2018 at 12:27

Mihai Alexandru-Ionut · Accepted Answer · 2018-10-26 12:29:34Z

2

You should use map method in conbination with destructuring.

<div v-for="post in posts">
    <div>{{ post.categories.data.map(({name}) => name).join(' ') }}</div>
</div>

answered Oct 26, 2018 at 12:29

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user9664977 Over a year ago

That did the trick, Thanks! I am going to look more into the map method

Collectives™ on Stack Overflow

Displaying Objects in an Array VueJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related