Convert nested JSON Object into a specific array format

Question

I have nested JSON object looking like below and this JSON object I have to convert into some particular format which I have given below:

    let jsonObj ={"data": {
    "cardShop": {
      "cardData": {
        "cardTitle": "The Platinum Card<sup>®</sup>",
        "cardType": "credit-cards",
        "dtmProductName": "PlatinumCard",
         "viewAllCards": {
         "url": "credit-cards/all-cards",
         "text": "All Cards"
        }
      },
      "eligibilityChecker": {
        "header": "Check your eligibility",
        "subHeader": "The Platinum Card®",
        "bulletPoints": [
          "Only takes a couple of minutes to complete",
          "Will not impact your credit rating",
          "Allows you to apply with confidence"
        ]
      }
    }
  }
}

And the above JSON object I have to convert it to the below format with some new properties like key, title, parentId, id, etc..

    [

    {
        id: "cardShop",
        key: "cardShop",
        title: "cardShop",
        selectable: false,
        children: [
            {
                id: "cardData",
                path:"cardShopCardData"
                key: "cardData",
                title: "cardData",
                parentId: "cardShop",
                selectable: false,
                children: [
                    {
                        id: "cardTitle",
                        path :"cardShopcardDatacardTitle"
                        key: "cardTitle",
                        title: "cardTitle",
                        parentId: "cardData",
                        isLeaf: true,
                        children: []
                    },
                    {
                        id: "cardType",
                        key: "cardType",
                        title: "cardType",
                        parentId: "cardData",
                        isLeaf: true,
                        children: []
                    },
                    {
                        id: "dtmProductName",
                        key: "dtmProductName",
                        title: "dtmProductName",
                        parentId: "cardData",
                        isLeaf: true,
                        children: []
                    },
                    {
                        id: "viewAllCards",
                        key: "viewAllCards",
                        title: "viewAllCards",
                        parentId: "cardData",
                        selectable: false,
                        children: [
                            {
                                id: "url",
                                key: "url",
                                title: "url",
                                parentId: "viewAllCards",
                                isLeaf: true,
                            },
                            {
                                id: "text",
                                key: "text",
                                title: "text",
                                parentId: "viewAllCards",
                                isLeaf: true,
                            }

                        ]
                    }
                ]
            },
            {
                id: "eligibilityChecker",
                key: "eligibilityChecker",
                title: "eligibilityChecker",
                parentId: "cardData",
                selectable: false,
                children: [
                    {
                        id: "header",
                        key: "header",
                        title: "header",
                        parentId: "eligibilityChecker",

                    },
                    {
                        id: "subHeader",
                        key: "subHeader",
                        title: "subHeader",
                        parentId: "eligibilityChecker",

                    },
                    {
                        id: "bulletPoints",
                        key: "bulletPoints",
                        title: "bulletPoints",
                        parentId: "eligibilityChecker",

                    },
                    {
                        id: "image",
                        key: "image",
                        title: "image",
                        parentId: "eligibilityChecker",

                    }
                ]
            }
        ]
    }

];

I have tried below things. For each object I need a parentId.

let prevKey =""
const iterate = (obj) => {
  Object.keys(obj).forEach(key => {
  if (typeof obj[key] === 'object' && obj[key] !== null) {
  
    let c ={
      id:key,
      title:key,
      selelected:false,
      children:[]
    };
    if(prevKey && Object.keys(output).length === 0){
      output ={
        children :[]
      }
     output.children.push(c)
    }
    else if(prevKey ){
      output.children.push(c)

    } else{
      output = c
    }
    prevKey = key;
    iterate(obj[key])

      }
      else{
        let c ={
        id:key,
        title:key,
        selelected:false,
        children:[]
      };
      output.children[0].children.push(c)
      }
  })
}

I have tried using recursion but somehow I am not able to get an expected output.

R4ncid · Accepted Answer · 2023-01-20 14:47:33Z

1

you can do something like this

const transform = data => {
 const loop  = (data, parent) => Object.entries(data).map(([key, value]) => {
    let additional = parent? {
      parentId: parent
    }:{}
    
    if(typeof value === 'object' && !Array.isArray(value)){
      additional = {
       ...additional,
       selectable: false,
       children: loop(value, key)
       
      }
    }else{
      additional.isLeaf = true
    }
    
    return {
      id: key,
      key,
      title: key,
      ...additional
    }
 })
 
 return loop(data)
}


let jsonObj = {
  "data": {
    "cardShop": {
      "cardData": {
        "cardTitle": "The Platinum Card<sup>®</sup>",
        "cardType": "credit-cards",
        "dtmProductName": "PlatinumCard",
        "viewAllCards": {
          "url": "credit-cards/all-cards",
          "text": "All Cards"
        }
      },
      "eligibilityChecker": {
        "header": "Check your eligibility",
        "subHeader": "The Platinum Card®",
        "bulletPoints": [
          "Only takes a couple of minutes to complete",
          "Will not impact your credit rating",
          "Allows you to apply with confidence"
        ]
      }
    }
  }
}

console.log(transform(jsonObj.data))

answered Jan 20, 2023 at 14:47

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

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

1 Comment

K.S Over a year ago

@R4nicd I need to add one more property path where I want parent node path ie. path

return {       id: key,       key,       path:cardShop.cardData.viewAllCards.url       title: key,       ...additional     }

this way. is it possible

Collectives™ on Stack Overflow

Convert nested JSON Object into a specific array format

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related