Vue / JavaScript – How to push dynamic object to array

I have this data:

[
    {
        "_id": "6937729",
        "affiliate_url": "https://event.2performant.com/events/click?ad_type=product_store&unique=116db0312&aff_code=4b8685e94&campaign_unique=4b9a6d5ea",
        "availability": true,
        "brand": "SensoPRO Milano",
        "descriptionDDDD": "Botosi Tratament Parafina Soft Ingrid SensoPRO Milano sunt alegerea perfecta pentru a evita aparitia calcaielor crapate sau a deshidratarii pielii picioarelor! Botosii SPA sunt creati din material textil, flausat. Fiind flausati, mentin o temperatura constanta a parafinei atunci cand sunt utilizati. Folosind Botosi Tratament Parafina Soft Ingrid SensoPRO Milano vei obtine intretinerea picioarelor, dar vei avea parte si de momente de relaxare! ATENTIE! Acesti botosi nu au parafina inclusa, aceasta se cumpara separat!",
        "id": "6937729",
        "image_link": [
            "https://cdnmpro.com/677236441/p/raw/6/botosi-tratament-parafina-soft-ingrid-sensopro-milano~7633286.jpg",
            "https://cdnmpro.com/677236441/p/raw/5/botosi-tratament-parafina-soft-ingrid-sensopro-milano~7633285.jpg",
            "https://cdnmpro.com/677236441/p/raw/7/botosi-tratament-parafina-soft-ingrid-sensopro-milano~7633287.jpg",
            "https://cdnmpro.com/677236441/p/raw/8/botosi-tratament-parafina-soft-ingrid-sensopro-milano~7633288.jpg",
            "https://cdnmpro.com/677236441/p/raw/5/botosi-tratament-parafina-soft-ingrid-sensopro-milano~7643575.jpg"
        ],
        "link": "https://www.kitunghii.ro/parafina-cosmetica-2/botosi-tratament-parafina-soft-ingrid-sensopro-milano?utm_source=portal&utm_medium=web&utm_campaign=2parale",
        "price": "19.9",
        "product type": "Epilare",
        "test_value_name1": "test_content_value1",
        "test_value_name2": "test_content_value2",
        "title": "Botosi Tratament Parafina Soft Ingrid SensoPRO Milano",
        "updated_at": "2022-08-31T12:29:56.000000Z",
        "date_upd": 1665255561
    },
    {
        "_id": "6937887",
        "affiliate_url": "https://event.2performant.com/events/click?ad_type=product_store&unique=5cd952501&aff_code=4b8685e94&campaign_unique=4b9a6d5ea",
        "availability": true,
        "brand": "SensoPRO Milano",
        "descriptionDDDD": "Magnet Cat Eye Dublu pentru Oja SensoPRO Milano, accesorii pentru unghii, se adreseaza in mod special ojelor permanente Magnetto pentru Cat Eye Effect, in realizarea efectului special de "Cat Eyes".",
        "id": "6937887",
        "image_link": [
            "https://cdnmpro.com/677236441/p/raw/4/magnet-cat-eye-dublu-pentru-oja-sensopro-milano~7618904.jpg",
            "https://cdnmpro.com/677236441/p/raw/3/magnet-cat-eye-dublu-pentru-oja-sensopro-milano~7618903.jpg"
        ],
        "link": "https://www.kitunghii.ro/accesorii-manichiura/magnet-cat-eye-dublu-pentru-oja-sensopro-milano?utm_source=portal&utm_medium=web&utm_campaign=2parale",
        "price": "9.9",
        "product type": "Accesorii Unghii",
        "test_value_name1": "test_content_value1",
        "test_value_name2": "test_content_value2",
        "title": "Magnet Cat Eye Dublu pentru Oja SensoPRO Milano",
        "updated_at": "2022-08-31T12:29:56.000000Z",
        "date_upd": 1665248423
    },
]

My Goal is to build a table using that data where the table header will be the object key and value will be that corresponding object keys value.

**What I am doing **

First I get the key from the first object and store it to productKeys :

//Get the keys of products 
Object.keys(response.data.data[0]).forEach(key => {
    this.productKeys.push(key)
})

Now, I am adding that keys to columns:

// Set table the header
this.productKeys.forEach( (key ) => {
    this.columns.push({
        label : this.capitalizeFirstLetter(key.replace(/_/g, ' ')),
        field : key, 
        tdClass : 'collapseCol'
    })
});
 

Now, I can see the table header. Its time to set the corresponding header value. To do that, I am doing:

response.data.data.forEach( ( item ) => {
    Object.keys(item).forEach(key => {
        this.productKeys.forEach(()=>{
            this.rows.push({
                [key] : item[key]
            });    
        });
    });
});

BUT, It doesn’t set the table cell value to that corresponding header. Currenlty the output is something like this: https://prnt.sc/Z3QHK5ZI6-Ib

Its should be fill up all the rows. I think the issue is at this line

this.productKeys.forEach((key2)=>{
    this.rows.push({
        [key] : item[key]
    });    
});

Can you tell me how can I solve it?

Answer

Running 3 loop is not required, you already have a key array. just use that

response.data.data.forEach( ( item ) => {
        let temp_row = {}
        this.productKeys.forEach((key)=>{
            temp_row ={...temp_row,
                [key] : item[key]
            };    
        });
        this.rows.push(temp_row)
});

Although I would suggest to handle some of the calculations in backend API, such that you at least get the key array from backend to be more efficient.