Conversion from nested objects to hierarchical data structure in d3.js

Question

I want to convert the following nested object into hierarchical data structure

{
"AP":{
    "districts":{
        "Anantapur":{
            "total":{
                "confirmed":66593,
                "deceased":587,
                "recovered":65697
            }
        },
        "Chittoor":{
            ...
        }
    }
},
"AR":{
    "districts":{....}
}...so on
}

to

[
{
    "name":"AP",
    "children":[
        {
            "name":"Anantapur",
            "children":[
                {
                    "name":"confirmed",
                    "value":66593
                },
                {
                    "name":"deceased",
                    "value":587
                },
                {
                    "name":"recovered",
                    "value":65697
                }
            ]
        },
        {
          ...
        }
    ]
},...so on
]

How can this be done?...I tried using d3 nest but there is no common key value like

"state":"AP", "state":"AR".

Here "AP" and "AR" are keys themselves. Is there any other method of doing this?

Andrew Reid · Accepted Answer · 2020-12-02 16:51:46Z

You can use Object.keys(data).map(function(key) { to create an array with an item for every property in your objects. You can nest this approach to get to the desired outcome. Here's a manual solution for your data structure (you could use a recursive function for arbitrarily nested data with a slightly different output, but given the depth of the object and the structure of the output, I have not done that):

var data = { "State One":{
    "districts":{
        "Region A":{
            "total":{
                "confirmed":1,
                "deceased":2,
                "recovered":3
            }
        },
        "Region B":{
            "total":{
                "confirmed":4,
                "deceased":5,
                "recovered":6
            }
        }
    }
},
"State Two":{
    "districts":{
        "Region C":{
            "total":{
                "confirmed":7,
                "deceased":8,
                "recovered":9
            }
        }
  }
}
}

var output = Object.keys(data).map(function(key) {
   return {
    name:key,
    children: Object.keys(data[key]["districts"]).map(function(district) {
      return {
        name:district,
        children: Object.keys(data[key]["districts"][district]["total"]).map(function(d) {
          return { name: d, value:data[key]["districts"][district]["total"][d] }
        })
      }
    })
   }
})

console.log(output);

Collectives™ on Stack Overflow

Conversion from nested objects to hierarchical data structure in d3.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related