how to encode/ change the format of existing json to another using angular/javascript

Question

here i m having a json in below format

Present Format

 {
  "info": {
    "laptop": {
    },
    "config": {
      "properties": {
        "ram": {
        },
        "processor": {
        },
        "hdd": {

        }
      }
    },
    "link": {

    },
    "name": {

    },
    "company": {
      "properties": {
        "model": {

        },
        "maker": {
          "type": "integer"
        },
        "country": {
          "type": "text"
        },
        "enterprise": {

        }

      }
    }
  }
}

i am using some plugin like ngx-tree, primeng plugins for which data needs to be in different format like below

Required Format

  [
        {
          name: 'laptop',

        },
        {
          name: 'config',
          children: [
            { name: 'ram', children: [] },
            { name: 'processor' },
            {name:'hdd'}
          ]
        },
         {
          name: 'link',
          children: []
        },
        {
          name: 'name',
          children: []
        },

        {
          name: 'company',
          children: [
            { name: 'model' },
            { name: 'maker' },
            { name: 'country' },
            { name: 'enterprise' }

          ]
        }
      ];

now my issue is how can i change my data from the present format to required format ? is there any suggestion so that i can make that change

can you update the required format clear?

Harish
– Harish

2018-12-11 04:22:42 +00:00
Commented Dec 11, 2018 at 4:22 — Harish
– Harish, Commented Dec 11, 2018 at 4:22
@Harish now it is updated please check

Dexter
– Dexter

2018-12-11 04:35:39 +00:00
Commented Dec 11, 2018 at 4:35 — Dexter
– Dexter, Commented Dec 11, 2018 at 4:35

Dennis Ruiter · Accepted Answer · 2018-12-11 04:36:17Z

1

You can recursively walk over the input object to map it to the required format with something like this:

  function recursiveConvert(input) {
     let converted = []

     for(i in input){
       converted.push({
         name: i,
         children: []
       })

       if(input[i].properties) {
          converted[converted.length - 1].children.push(recursiveConvert(input[i].properties)) 
       }
     }

     return converted
  }

If you want no empty children arrays simply change it to:

function recursiveConvert(input) {
     let converted = []

     for(i in input){
       converted.push({
         name: i
       })

       if(input[i].properties) {
          let lastInsert = converted[converted.length - 1]

          lastInsert.children = [recursiveConvert(input[i].properties)]
       }
     }

     return converted
  }

be sure to call it with recursiveConvert(myInput.info) since it doesn't expect that wrapper object.

answered Dec 11, 2018 at 4:36

Dennis Ruiter

2053 silver badges8 bronze badges

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

2 Comments

Dexter Over a year ago

based on our input i created this stack link please check but im not able to get any log stackblitz.com/edit/angular-yljwzd

Dennis Ruiter Over a year ago

Like I said call it with this.recursiveConvert(this.data.info), it's not expecting the wrapping info object

Yosvel Quintero · Accepted Answer · 2018-12-11 04:57:21Z

1

You can do:

const json = {"info": {"laptop": {},"config": {"properties": {"ram": {},"processor": {},"hdd": {}}},"link": {},"name": {},"company": {"properties": {"model": {},"maker": {"type": "integer"},"country": {"type": "text"},"enterprise": {}}}}};
const result = Object.keys(json.info).map(k => ({
  name: k,
  children: json.info[k].properties
    ? Object.keys(json.info[k].properties).map(kk => ({name: kk}))
    : []
}));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Dec 11, 2018 at 4:57

answered Dec 11, 2018 at 4:53

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

3 Comments

Dexter Over a year ago

can it work on n number child ? i mean suppose if a key has nested children and in that also we have nested children

Yosvel Quintero Over a year ago

You can do it recursively by keeping track of the current object and check if has children..

Dexter Over a year ago

i mean like this { name: 'root2', children: [ { name: 'child1' }, { name: 'child2', children: [ { name: 'grandchild1' }, { name: 'grandchild2' } ] } ] } ]; ?

ic3b3rg · Accepted Answer · 2018-12-11 18:36:51Z

1

Here's a one line, purely functional solution:

const input = {
  "info": {
    "laptop": {
    },
    "config": {
      "properties": {
        "ram": {
        },
        "processor": {
        },
        "hdd": {

        }
      }
    },
    "link": {

    },
    "name": {

    },
    "company": {
      "properties": {
        "model": {
          "properties": {
            "apple": {},
            "banana": {},
            "pear": {}
          }
        },
        "maker": {
          "type": "integer"
        },
        "country": {
          "type": "text"
        },
        "enterprise": {

        }

      }
    }
  }
}

const convert = input => Object
  .entries(input)
  .map(([name, value]) => ({
    name,
    children: convert(value.properties || {})
  }))

console.log(convert(input.info));

Here's an es2015 version:

function convert(input) {
  return Object.keys(input).map(function(name) {
    return {
      name: name,
      children: convert(input[name].properties || {})
    };
  });
}

edited Dec 11, 2018 at 18:36

answered Dec 11, 2018 at 4:56

ic3b3rg

15k4 gold badges33 silver badges55 bronze badges

2 Comments

Dexter Over a year ago

can it work on n number child ? i mean suppose if a key has nested children and in that also we have nested children

Dexter Over a year ago

it uses es 2017 right is it possible with es 6 or 5 bcoz in my application it is giving errors

Collectives™ on Stack Overflow

how to encode/ change the format of existing json to another using angular/javascript

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related