JSFiddle - React, Tailwind, and code Playground

by Guddu Kumar

HTML

<textarea style="width:100%;height:600px;" id="textarea"></textarea>

JavaScript

var test ={
  "depth00": {
    "depth10": "string",
    "depth11": 11,
    "depth12": {
      "depth20": "string",
      "depth21": 21
    },
    "depth13": [
      {
        "depth22": "2201",
        "depth23": "2301"
      },
      {
        "depth22": "2202",
        "depth23": "2302"
      }
    ]
  },
  "depth01": {
    "depth10": "string",
    "depth11": 11,
    "depth12": {
      "depth20": "string",
      "depth21": 21
    },
    "depth13": [
      {
        "depth22": "2201",
        "depth23": "2301"
      },
      {
        "depth22": "2202",
        "depth23": "2302"
      }
    ]
  },
  "depth02": "string",
  "dpeth03": 3
};


function traverse(result, obj, preKey) {
debugger;
    if(!obj) return [];
    if (typeof obj == 'object') {
        for(var key in obj) {
            traverse(result, obj[key], (preKey || '') + (preKey ? '>' +  key + '>' : key))
        }
    } else {
        result.push({
            key: (preKey || '')
            , val: obj
        });
    }
    return result;
}

document.getElementById('textarea').value = JSON.stringify(traverse([], test), null, 2);