JavaScript - Loop through all object property and make new array of object

Question

I have this data :

let obj = {
    "additional_image_link": [
        [
            "https://2ccdn.celestino.gr/small/SK7732.1825-7@2.jpg",
            "https://2ccdn.celestino.gr/small/SK7732.1825-7@2F.jpg",
        ]
    ],
    "aff_link": "https://go.linkwi.se/z/11593-0/CD24352/?lnkurl=https%3A%2F%2Fwww.celestino.gr%2Fel-GR%2Fpanteloni-me-pietes-lefko%2Fprd%2FSK7732.1825%2F7%3Faffiliate%3Dlinkwise%26utm_source%3Dlinkwise%26utm_medium%3Dlw%26utm_campaign%3Dlw",
    "all_sizes": [
        "S",
        "M",
        "L"
    ],
    "availability": "Y",
    "brand": "Celestino",
    "breadcrumbs": [
        "ΡΟΥΧΑ",
        "ΠΑΝΤΕΛΟΝΙΑ"
    ],
    "breadcrumbs_url": [
        "/el-gr/gynaikeia-rouxa/r=0000000006",
        "/el-gr/gynaikeia-pantelonia/r=0101000000",
        "/el-gr/pantelonia/r=0101001800"
    ],
    "description": "Παντελόνι με πιέτες, κλείσιμο με φερμουάρ και κουμπί, θηλιές στη μέση, με τσέπες, λευκο",
    "id": "SK7732.1825+1",
    "image_link": "https://2ccdn.celestino.gr/small/SK7732.1825-7@1F.JPG",
    "link": "https://www.celestino.gr/el-GR/panteloni-me-pietes-lefko/prd/SK7732.1825/7?affiliate=linkwise&utm_source=linkwise&utm_medium=lw&utm_campaign=lw",
    "sizes_in_stock": [
        "S",
        "M"
    ],
    "sizes_in_stock_feed": "S,M,L",
};

Now, I want to loop through all the property of this object and make a new array of object. I mean property will be same but if the property value has array or array of array I want to make it a single array.

What I tried :

let additional = [];
        
for( property in obj ) {
    if( Array.isArray( obj[ property ] ) ) {
        additional.push({
            [property] : obj[property]
        });
    } else if ( isValidUrl ( obj[ property ] ) ) {
         additional.push({
            [property] : '<a href="' + obj[ property ] + '">' + obj[ property ] + '</a>'
        });
    } else {
         additional.push({
            [property] : obj[property]
        });
    }
}

console.log(additional)

The output is :

[ { additional_image_link: [ [Array] ] },
  { aff_link:
     '<a href="https://go.linkwi.se/z/11593-0/CD24352/?lnkurl=https%3A%2F%2Fwww.celestino.gr%2Fel-GR%2Fpanteloni-me-pietes-lefko%2Fprd%2FSK7732.1825%2F7%3Faffiliate%3Dlinkwise%26utm_source%3Dlinkwise%26utm_medium%3Dlw%26utm_campaign%3Dlw">https://go.linkwi.se/z/11593-0/CD24352/?lnkurl=https%3A%2F%2Fwww.celestino.gr%2Fel-GR%2Fpanteloni-me-pietes-lefko%2Fprd%2FSK7732.1825%2F7%3Faffiliate%3Dlinkwise%26utm_source%3Dlinkwise%26utm_medium%3Dlw%26utm_campaign%3Dlw</a>' },
  { all_sizes: [ 'S', 'M', 'L' ] },
  { availability: 'Y' },
  { brand: 'Celestino' },
  { breadcrumbs: [ 'ΡΟΥΧΑ', 'ΠΑΝΤΕΛΟΝΙΑ' ] },
  { breadcrumbs_url:
     [ '/el-gr/gynaikeia-rouxa/r=0000000006',
       '/el-gr/gynaikeia-pantelonia/r=0101000000',
       '/el-gr/pantelonia/r=0101001800' ] },
  { description:
     'Παντελόνι με πιέτες, κλείσιμο με φερμουάρ και κουμπί, θηλιές στη μέση, με τσέπες, λευκο' },
  { id: 'SK7732.1825+1' },
  { image_link: 'https://2ccdn.celestino.gr/small/SK7732.1825-7@1F.JPG' },
  { link:
     '<a href="https://www.celestino.gr/el-GR/panteloni-me-pietes-lefko/prd/SK7732.1825/7?affiliate=linkwise&utm_source=linkwise&utm_medium=lw&utm_campaign=lw">https://www.celestino.gr/el-GR/panteloni-me-pietes-lefko/prd/SK7732.1825/7?affiliate=linkwise&utm_source=linkwise&utm_medium=lw&utm_campaign=lw</a>' },
  { sizes_in_stock: [ 'S', 'M' ] },
  { sizes_in_stock_feed: 'S,M,L' } ]

But as you can see the additional_image_link has an array of array that's why the output is showing [Array]. But I want it's should be single array link all_sizes.

I have recursive function to loop through array of array :

function loop(data, outputArray) {
    if(!Array.isArray(data)) { 
        outputArray.push(data);
    } else {
        data.forEach( ( element ) => {
            if(Array.isArray(element)) {
                loop(element, outputArray);
            } else {
                outputArray.push(element);
            }
        })
    }
}

But no idea how to use it to the function.

May be I need to work on this block:

if( Array.isArray( obj[ property ] ) ) {
    additional.push({
        [property] : obj[property]
    });
}

score 1 · Answer 1 · answered Nov 10 '22 at 06:56

You can use Array.isArray() to check if object property contains an array or not and then by using Array.flat() you can convert the multi dimensional array into single dimensional.

Live Demo :

let obj = {
  "additional_image_link": [
    [
      "https://2ccdn.celestino.gr/small/SK7732.1825-7@2.jpg",
      "https://2ccdn.celestino.gr/small/SK7732.1825-7@2F.jpg",
    ]
  ],
  "aff_link": "https://go.linkwi.se/z/11593-0/CD24352/?lnkurl=https%3A%2F%2Fwww.celestino.gr%2Fel-GR%2Fpanteloni-me-pietes-lefko%2Fprd%2FSK7732.1825%2F7%3Faffiliate%3Dlinkwise%26utm_source%3Dlinkwise%26utm_medium%3Dlw%26utm_campaign%3Dlw",
  "all_sizes": [
    "S",
    "M",
    "L"
  ],
  "availability": "Y",
  "brand": "Celestino",
  "breadcrumbs": [
    "ΡΟΥΧΑ",
    "ΠΑΝΤΕΛΟΝΙΑ"
  ],
  "breadcrumbs_url": [
    "/el-gr/gynaikeia-rouxa/r=0000000006",
    "/el-gr/gynaikeia-pantelonia/r=0101000000",
    "/el-gr/pantelonia/r=0101001800"
  ],
  "description": "Παντελόνι με πιέτες, κλείσιμο με φερμουάρ και κουμπί, θηλιές στη μέση, με τσέπες, λευκο",
  "id": "SK7732.1825+1",
  "image_link": "https://2ccdn.celestino.gr/small/SK7732.1825-7@1F.JPG",
  "link": "https://www.celestino.gr/el-GR/panteloni-me-pietes-lefko/prd/SK7732.1825/7?affiliate=linkwise&utm_source=linkwise&utm_medium=lw&utm_campaign=lw",
  "sizes_in_stock": [
    "S",
    "M"
  ],
  "sizes_in_stock_feed": "S,M,L",
};

Object.keys(obj).forEach(key => {
    if(Array.isArray(obj[key])) {
    obj[key] = obj[key].flat();
  }
});

console.log(obj);

score 0 · Answer 2 · answered Nov 10 '22 at 04:41

You can use Array.concat with spread operator to achieve this. However, this will work only 1 level. If you have a deeply nested object, You will have to create a recursive method.

[property] : [].concat(...obj[property])

Sample:

let obj = {
  "additional_image_link": [
    [
      "https://2ccdn.celestino.gr/small/SK7732.1825-7@2.jpg",
      "https://2ccdn.celestino.gr/small/SK7732.1825-7@2F.jpg",
    ]
  ],
  "aff_link": "https://go.linkwi.se/z/11593-0/CD24352/?lnkurl=https%3A%2F%2Fwww.celestino.gr%2Fel-GR%2Fpanteloni-me-pietes-lefko%2Fprd%2FSK7732.1825%2F7%3Faffiliate%3Dlinkwise%26utm_source%3Dlinkwise%26utm_medium%3Dlw%26utm_campaign%3Dlw",
  "all_sizes": [
    "S",
    "M",
    "L"
  ],
  "availability": "Y",
  "brand": "Celestino",
  "breadcrumbs": [
    "ΡΟΥΧΑ",
    "ΠΑΝΤΕΛΟΝΙΑ"
  ],
  "breadcrumbs_url": [
    "/el-gr/gynaikeia-rouxa/r=0000000006",
    "/el-gr/gynaikeia-pantelonia/r=0101000000",
    "/el-gr/pantelonia/r=0101001800"
  ],
  "description": "Παντελόνι με πιέτες, κλείσιμο με φερμουάρ και κουμπί, θηλιές στη μέση, με τσέπες, λευκο",
  "id": "SK7732.1825+1",
  "image_link": "https://2ccdn.celestino.gr/small/SK7732.1825-7@1F.JPG",
  "link": "https://www.celestino.gr/el-GR/panteloni-me-pietes-lefko/prd/SK7732.1825/7?affiliate=linkwise&utm_source=linkwise&utm_medium=lw&utm_campaign=lw",
  "sizes_in_stock": [
    "S",
    "M"
  ],
  "sizes_in_stock_feed": "S,M,L",
};

let additional = [];
const isValidUrl = () => true
        
for( property in obj ) {
    if( Array.isArray( obj[ property ] ) ) {
        additional.push({
            [property] : [].concat(...obj[property])
        });
    } else if ( isValidUrl ( obj[ property ] ) ) {
         additional.push({
            [property] : '<a href="' + obj[ property ] + '">' + obj[ property ] + '</a>'
        });
    } else {
         additional.push({
            [property] : obj[property]
        });
    }
}

console.log( additional )

Than you so much. Yes, I might have deeply nested object. What should I do then? Can you show me? — Shibbir, Nov 10 '22 at 04:45
For that, you can refer **[this](https://stackoverflow.com/questions/35272533/flattening-deeply-nested-array-of-objects)** — Rajesh, Nov 10 '22 at 05:45

JavaScript - Loop through all object property and make new array of object

2 Answers2