Create Multiple dictionary from single single JSON response in javascript?

Question

Suppose I have a JSON response from server with following structure

   var data={
    "Data1": {
      "height": 39, 
      "weight": 62, 
      "shape": {
        "length": 19, 
        "width": 72
      }, 
      "color": "#00ff00", 
      "radius": 9.5, 
      "color_srv": "#ffff00"
    }, 
    "Data2": {
      "height": 0, 
      "weight": 40, 
      "shape": {
        "length": 19, 
        "width": 72
      }, 
      "color": "#000000", 
      "radius": 2.5, 
      "color_srv": "#ff0000"
    }
  }

I want this data dictionary to split into two with certain data in one dictionary while maintaining the structure. For eg

  var data_height = {
    "Data1":{
      "height": 39,  
      "shape": {
        "length": 19, 
        "width": 72
      }, 
      "color": "#00ff00", 
      "radius": 9.5, 
    },
    "Data2":{
      "height": 0,  
      "shape": {
        "length": 19, 
        "width": 72
      }, 
      "color": "#000000", 
      "radius": 2.5, 
    }
  }
  var data_weight = {
    "Data1":{
      "weight": 39,  
      "shape": {
        "length": 19, 
        "width": 72
      }, 
      "color_srv": "#00ff00", 
      "radius": 9.5, 
    },
    "Data2":{
      "weight": 0,  
      "shape": {
        "length": 19, 
        "width": 72
      }, 
      "color_srv": "#000000", 
      "radius": 2.5, 
    }
  }

The above two dictionary serve different purpose, so after getting unified result how am i suppose to split that single data from back end into two different dictionaries.

edit

This is something I tried doing but it throws error

solution 1:

    var serve={},live={};
      for(d in data){
        pname = d.split(':')[0];
        serve['pname'].radius= data[d].radius;
        serve['pname'].center= data[d].center;
        serve['pname'].color= data[d].color_srv;
        live['pname'].radius= data[d].radius;
        live['pname'].center= data[d].center;
        live['pname'].color= data[d].color;
        serve['pname'].numbers= data[d].serving;
        live['pname'].numbers= data[d].living;
        serve['pname'].place= pname;
        live['pname'].place= pname;
      }

edit2

solution 2:

  var serve={},live={};
    for(d in data){
      pname = d.split(':')[0];
      serve['radius']= data[d].radius;
      serve['center']= data[d].center;
      serve['color']= data[d].color_srv;
      live['radius']= data[d].radius;
      live['center']= data[d].center;
      live['color']= data[d].color;
      serve['numbers']= data[d].serving;
      live['numbers']= data[d].living;
      serve['place']= pname;
      live['plcae']= pname;
    }

Both of the above solutions doesn't seems to work.

Answer 1

As Nina says, just clone the objects and remove the properties you don't need from each object. Here I've used reduce with an initial object with data_height and data_height properties.

var clone = function (obj) { return JSON.parse(JSON.stringify(obj)); }

var output = Object.keys(data).reduce(function (p, c) {
  var obj = data[c];
  p.data_height[c] = clone(obj);
  delete p.data_height[c].weight;
  delete p.data_height[c].color_srv;
  p.data_weight[c] = clone(obj);
  delete p.data_weight[c].height;
  delete p.data_weight[c].color;
  return p;
}, { data_height: {}, data_weight: {} });

OUTPUT

{
  "data_height": {
    "Data1": {
      "height": 39,
      "shape": {
        "length": 19,
        "width": 72
      },
      "color": "#00ff00",
      "radius": 9.5
    },
    "Data2": {
      "height": 0,
      "shape": {
        "length": 19,
        "width": 72
      },
      "color": "#000000",
      "radius": 2.5
    }
  },
  "data_weight": {
    "Data1": {
      "weight": 62,
      "shape": {
        "length": 19,
        "width": 72
      },
      "radius": 9.5,
      "color_srv": "#ffff00"
    },
    "Data2": {
      "weight": 40,
      "shape": {
        "length": 19,
        "width": 72
      },
      "radius": 2.5,
      "color_srv": "#ff0000"
    }
  }
}

DEMO