Home > Software design >  JavaScript - Loop through all object property and make new array of object
JavaScript - Loop through all object property and make new array of object

Time:11-10

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://www.celestino.gr/el-GR/panteloni-me-pietes-lefko/prd/SK7732.1825/7?affiliate=linkwise&utm_source=linkwise&utm_medium=lw&utm_campaign=lw",
    "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://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://go.linkwi.se/z/11593-0/CD24352/?lnkurl=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>' },
  { 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]
    });
}  

CodePudding user response:

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://www.celestino.gr/el-GR/panteloni-me-pietes-lefko/prd/SK7732.1825/7?affiliate=linkwise&utm_source=linkwise&utm_medium=lw&utm_campaign=lw",
  "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);

CodePudding user response:

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://www.celestino.gr/el-GR/panteloni-me-pietes-lefko/prd/SK7732.1825/7?affiliate=linkwise&utm_source=linkwise&utm_medium=lw&utm_campaign=lw",
  "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 )

  • Related