logo标签列表

循环遍历JSON - 特殊方式

javascripthtmlarraysjsonrecursion
3

我有一个非常复杂的嵌套的JSON对象，就像这个:

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: "..." },
      }
    }
  }
}

...我想循环遍历每个子树以获取类似于此的列表（其中每个子树的最后一个对象都获得了一个全新的属性，称为 src ，该属性表示对象路径作为字符串的路径）：

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" },
      }
    }
  }
}

因为我对如何开始这段代码一无所知，所以这就是我到目前为止做的全部。 

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)
.as-console-wrapper { max-height: 100% !important; top: 0; }

你想获得一个新对象还是更新后的对象？ - Nina Scholz
@NinaScholz: 原则上，只要采用了所有属性并且对象具有相同的结构，这几乎没有什么区别。最终，两者将几乎完全相同，只是“新”或“更新”的对象将获得每个分支多一个属性。 - user3596335
@NinaScholz：或者你的问题是针对特定的问题吗？你认为哪个选项更好？ - user3596335
1
没有所谓的“JSON对象” - JSON始终是一个字符串。 - Mulan
4个回答
2
我会创建一个递归函数，使用一个标志（这里是leaf）来指示是否有更多嵌套对象。您可以使用函数参数(path)来跟踪当前位置。每次递归步骤，只需将键添加到路径中。这将直接修改对象，但如果需要，使用相同的技术创建新对象也不难。 

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: "..." },}}}}

function walk(obj, path=''){
    let leaf = true
    Object.keys(obj).forEach(key => {
        if (typeof obj[key] === 'object' ){
            walk(obj[key], path +  '/' + key)
            leaf = false // this object has children, so don't add `src` prop
        }
    })
    if (leaf) obj['src'] = path
}

walk(myData)
console.log(myData)

1
这看起来是一个功能齐全且聪明的实现。感谢您的帮助。（+1） - user3596335
1
如果没有找到更多的嵌套对象，您可以创建一个新对象并将路径存储为 src。 

function getUpdate(object, path = []) {
    return Object.assign(...Object
        .entries(object)
        .map(([k, v]) => v && typeof v === 'object'
            ? { [k]: getUpdate(v, path.concat(k)) }
            : { [k]: v, src: path.join('/') }
        )
    );
}

var object = { 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: "..." } } } } };

console.log(getUpdate(object));
.as-console-wrapper { max-height: 100% !important; top: 0; }

哇，我真的很惊讶。谢谢你的帮助。说实话，我还没有听说过Object.assign。我会查看文档的。（+1） - user3596335
0
这是一个纯函数式的实现。它不会修改输入，而是返回一个新对象，其中所有具有type字段的对象都设置了path。
const addPath = (o = {}, path = []) =>
  // non-object? return input
  Object (o) !== o
    ? o

  // object has 'type'? assign 'path'
  : o.type !== undefined
    ? { ...o, path: [...path, o.type] .join ('/') }

  // otherwise: recur on each value with updated path
  : Object
      .entries (o)
      .reduce
        ( (acc, [key, value]) =>
            ({ ...acc, [key]: addPath (value, [...path, key]) })
        , {}
        )

请在您的浏览器中验证结果

const addPath = (o = {}, path = []) =>
  Object (o) !== o
    ? o
  : o.type !== undefined
    ? { ...o, path: [...path, o.type] .join ('/') }
  : Object
      .entries (o)
      .reduce
        ( (acc, [key, value]) =>
            ({ ...acc, [key]: addPath (value, [...path, key]) })
        , {}
        )
        
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: "..." },
      }
    }
  }
}

console.log (addPath (myData))

输出

{
  "character": {
    "player": {
      "player_1": {
        "type": "player1",
        "test": "A",
        "path": "character/player/player_1/player1"
      },
      "player_2": {
        "type": "player2",
        "test": "B",
        "path": "character/player/player_2/player2"
      },
      "player_3": {
        "type": "player3",
        "test": "C",
        "path": "character/player/player_3/player3"
      }
    },
    "enemy": {
      "enemy_walk": {
        "enemy_walk_1": {
          "type": "enemy_walkA",
          "test": "...",
          "path": "character/enemy/enemy_walk/enemy_walk_1/enemy_walkA"
        },
        "enemy_walk_2": {
          "type": "enemy_walkB",
          "test": "...",
          "path": "character/enemy/enemy_walk/enemy_walk_2/enemy_walkB"
        },
        "enemy_walk_3": {
          "type": "enemy_walkY",
          "test": "...",
          "path": "character/enemy/enemy_walk/enemy_walk_3/enemy_walkY"
        }
      }
    }
  },
  "blocks": {
    "wall": {
      "wall_1": {
        "type": "wallA",
        "test": "...",
        "path": "blocks/wall/wall_1/wallA"
      },
      "wall_2": {
        "type": "wallB",
        "test": "...",
        "path": "blocks/wall/wall_2/wallB"
      }
    },
    "obstacle": {
      "brick": {
        "brick1": {
          "type": "brickA",
          "test": "...",
          "path": "blocks/obstacle/brick/brick1/brickA"
        },
        "brick2": {
          "type": "brickC",
          "test": "...",
          "path": "blocks/obstacle/brick/brick2/brickC"
        }
      }
    }
  }
}
0
假设所有叶子节点都有一个共同的属性，比如type，可以检查该属性。 

const setPaths = (o, path = '') => {
  Object.keys(o).forEach(k => {
    const currPath = path ? `${path}/${k}` : k;
    if ('type' in o[k]) {
       o[k].src = currPath;
    } else {     
      setPaths(o[k], currPath)
    }
  })
}
setPaths(myData)

console.log(myData)
<script>
  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: "..."
          },
        }
      }
    }
  }
</script>

哇，这真是个好主意，而且还行之有效。说实话，这也是我第一次尝试这个属性，你做得很好。非常感谢你。（+1） - user3596335
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接