title: Loop through JSON - special way
body: <p>I got a really big nested <strong>JSON object</strong> like this one:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let myData = {
    character: {
      player: {
        player_1: { type: "player1", test:"A" },
        player_2: { type: "player2", test:"B" },
        player_3: { type: "player3", test:"C" }
      },
      enemy: {
        enemy_walk: {
          enemy_walk_1: { type:"enemy_walkA", test: "..." },
          enemy_walk_2: { type:"enemy_walkB", test: "..." },
          enemy_walk_3: { type:"enemy_walkY", test: "..." }
        }
      }
    },
    blocks: {
      wall: {
        wall_1: { type:"wallA", test: "..." },
        wall_2: { type:"wallB", test: "..." },
      },
      obstacle: {
        brick: {
          brick1: { type:"brickA", test: "..." },
          brick2: { type:"brickC", test: "..." },
        }
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>... and I'd like to loop through every subtree to get a list like this (where the last object of every subtree gets a brand new property called <code>src</code> that represents the <strong>path of the object as string</strong>:</p>
  
  <pre><code>let result = {
    character: {
      player: {
        player_1: { type: "player1", test:"A", src: "character/player/player_1" },
        player_2: { type: "player2", test:"B", src: "character/player/player_2" },
        player_3: { type: "player3", test:"C", src: "character/player/player_3" }
      },
      enemy: {
        enemy_walk: {
          enemy_walk_1: { type:"enemy_walkA", test: "...", src: "character/enemy/enemy_walk_1" },
          enemy_walk_2: { type:"enemy_walkB", test: "...", src: "character/enemy/enemy_walk_2" },
          enemy_walk_3: { type:"enemy_walkY", test: "...", src: "character/enemy/enemy_walk_3" }
        }
      }
    },
    blocks: {
      wall: {
        wall_1: { type:"wallA", test: "...", src: "blocks/wall/wall_1" },
        wall_2: { type:"wallB", test: "...", src: "blocks/wall/wall_2" },
      },
      obstacle: {
        brick: {
          brick1: { type:"brickA", test: "...", src: "blocks/obstacle/brick/brick1" },
          brick2: { type:"brickC", test: "...", src: "blocks/obstacle/brick/brick2" },
        }
      }
    }
  }
  </code></pre>
  
  <hr>
  
  <p>Because I do not really got a clue how to start this code is all that I've got so far. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myData={character:{player:{player_1:{type:"player1",test:"A"},player_2:{type:"player2",test:"B"},player_3:{type:"player3",test:"C"}},enemy:{enemy_walk:{enemy_walk_1:{type:"enemy_walkA",test:"..."},enemy_walk_2:{type:"enemy_walkB",test:"..."},enemy_walk_3:{type:"enemy_walkY",test:"..."}}}},blocks:{wall:{wall_1:{type:"wallA",test:"..."},wall_2:{type:"wallB",test:"..."}},obstacle:{brick:{brick1:{type:"brickA",test:"..."},brick2:{type:"brickC",test:"..."}}}}};
  
  let updateSRC = function(data) {
    let _data = data;
    let recursive = function(_data) {
      for (let key in _data) {
        if (typeof _data[key] == "Object") {
          recursive(_data[key]);
        } else {
           _data[key].src = "?"
        }
      }; recursive(_data)
    }; return _data || null;
  }
  let result = updateSRC(myData);
  console.log(result)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.as-console-wrapper { max-height: 100% !important; top: 0; }</code></pre>
  </div>
  </div>
  </p>