How to loop array inside object vue.js

Question

I have a question regarding looping through some data retrieved from an API using a GET fetch within Vue.js.

This is the response from the route:

"data": {
     "Orders": [
               {
            "OrderID": 1,
            "Ordered_Products": {
                            "items": [
                                         {
                                    "id": 2,
                                    "title": "Hildegard Prohaska",
                                    "quantity": 5,
                                    },
                                    {
                                    "id": 3,
                                    "title": "Odell Zieme",
                                    "quantity": 3,
                                    }
                                ]
                               },
            "Pay_method": 1,
            //stuff
       },
    {
            "OrderID": 1,
            "Ordered_Products": {
                            "items": [
                                         {
                                    "id": 2,
                                    "title": "Hildegard Prohaska",
                                    "quantity": 2,
                                    },
                                    {
                                    "id": 3,
                                    "title": "Odell Zieme",
                                    "quantity": 1,
                                    }
                                ]
                               },
            "Pay_method": 2,
            //stuff
       }
   ]
}

And here is my fetch:

methods: {
    fetchOrders () {
      fetch('https://myapidomine.com')
        .then(res => res.json())
        .then(res => {
          this.orders = res.data.Orders
        })
    }
  }

And I'm using it like this:

<v-card flat v-for="order in orders" :key="order.OrderID">
        <v-layout row wrap">
          <v-flex xs12 md4>
            <div class="caption grey--text">PayMethod</div>
            <div>{{ order.Pay_method }}</div>
          </v-flex>

If I access to a key inside Orders, like {{order.Pay_method}} works fine, and that loop is working fine, but I need to loop the items inside Ordered_Products.items and use title, etc...

If I do:

<v-list-item-title xs12 md3>{{order.Ordered_Products.items[0].title}}

I get the data fine, but of course just of the first product, but not sure how can I loop that data

Thank you in advance, (I'm new in vue)

Have you tried simply <v-list-item-title xs12 md3 v-for="item in order.Ordered_Products.item">{{item.title}}? — Sebastian Kaczmarek
– Sebastian Kaczmarek, Commented Nov 12, 2019 at 15:41

Konrad Słotwiński · Accepted Answer · 2019-11-12 15:41:03Z

1

I dont see your whole code but something like this would do:

<v-list-item-title xs12 md3 :key="index" v-for="(item, index) in order.Ordered_Products.items">
   {{item.title}}
</v-list-item-title>

answered Nov 12, 2019 at 15:41

Konrad Słotwiński

6994 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

How to loop array inside object vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related