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/[email protected]",
            "https://2ccdn.celestino.gr/small/[email protected]",
        ]
    ],
    "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/[email protected]",
    "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/[email protected]' },
  { 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]
    });
}

Rohìt Jíndal · Accepted Answer · 2022-11-10 06:56:21Z

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/[email protected]",
      "https://2ccdn.celestino.gr/small/[email protected]",
    ]
  ],
  "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/[email protected]",
  "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);

Rajesh Dixit · Accepted Answer · 2022-11-10 04:41:37Z

0

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/[email protected]",
      "https://2ccdn.celestino.gr/small/[email protected]",
    ]
  ],
  "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/[email protected]",
  "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 )

answered Nov 10, 2022 at 4:41

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

4 Comments

Shibbir Over a year ago

Than you so much. Yes, I might have deeply nested object. What should I do then? Can you show me?

Rajesh Dixit Over a year ago

Can you update question with possible structure?

Shibbir Over a year ago

it could be just array of array OR object has array value.

Rajesh Dixit Over a year ago

For that, you can refer this

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related