How to retrieve array inside an array into a table using vue js

Question

i want to retrieve some array inside an array but i dont know how, please read my explanation first

here is my json response

{
"Value": [
    {
        "id": "5ff97d740e788778dd66ee25",
        "id_order": "ORD-434183",
        "nama_pelanggan": "Herman",
        "total": 80000.0,
        "jumlah_item": 4.0,
        "cart": [
            {
                "id_cart": "CART-112010",
                "nama_produk": "Ayam Bakar",
                "jumlah": 4.0,
                "harga": 20000.0,
                "subtotal": 80000.0,
                "notes": "ga ada"
            }
        ],
        "admin_no": "ADM-431525",
        "admin_name": "Admin",
        "created_at": "2021-01-09 16:55:00",
        "updated_at": "2021-01-09 16:55:00"
    }
],
"Status": true,
"Messages": [
    {
        "Type": 200,
        "Title": "TotalRows",
        "Message": "1"
    }
]}

as you can see the value of "value" is an array and in that array also have an array "cart"

i want to retrieve this array "cart" and put it in a table

here is how i retrieve the response using vue js Mapping an Array to Elements with v-for

var vm = new Vue({
el: '#app',
data: {
    list: {
        items: [],
    },
}

            var formData = new FormData();
            formData.append('filterparams', JSON.stringify(filters));
            formData.append('display', JSON.stringify(_self.list.config.display));
            formData.append('auth', sessionStorage.getItem("token"));

            _self.$http.post(hostapi + 'order/GetByParamsHistory', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            });
            var obj = response.data;
            _self.list.items = obj.Value; // the value from array "Value"

here is the table html code

and now I don't know how to insert an existing array in the array into the html table

Yash Maheshwari · Accepted Answer · 2021-01-09 12:33:32Z

1

You can access the array on the basis of the array index.

Suppose, if list contains the json response's value field then you can access it like. list['0'].cart.

answered Jan 9, 2021 at 12:33

Yash Maheshwari

2,4122 gold badges10 silver badges22 bronze badges

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

11 Comments

Kina Farzana Over a year ago

thanks to you i can retrieve the array, but the contents of the cart array do not match the contents, like only taking from the first array, can you help me to solve this ?

Kina Farzana Over a year ago

all of my data order now have the same cart item in the front end, what should i do to solve this ???

Yash Maheshwari Over a year ago

With v-for we should also pass a key something like this: <tr v-for="(row, index) in list['0'].cart" :key="index>.

Kina Farzana Over a year ago

what is index ?

Kina Farzana Over a year ago

do you know how to implement increment in this code list['0'].cart ?

|

Collectives™ on Stack Overflow

How to retrieve array inside an array into a table using vue js

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related