如何访问这些 JSON 值？

Question

我正在尝试访问 JSON 值。 这是 JSON object：

       {
   "attrs": {
      "width": 1728,
      "height": 787,
      "dragabble": true
   },
   "className": "Stage",
   "children": [
      {
         "attrs": {},
         "className": "Layer",
         "children": [
            {
               "attrs": {
                  "stroke": "green",
                  "strokeWidth": "5",
                  "points": [
                     348,564.125
                  ]
               },
               "className": "Line"
            }
         ]
      }
   ]
}

我正在尝试在这里使用这些值，例如点：

socket.on("canvas-data", function(data){
    var interval = setInterval(function(){
      if(isDrawing) return;
      setIsDrawing(true);
      clearInterval(interval);
      var obj = JSON.parse(data);
      setStageData(obj);
      var layer = new Konva.Layer();
      var lines = new Konva.Line(
      {
        stroke: stageData.stroke,
        strokeWidth: stageData.strokeWidth,
        points: stageData.points
      })
    layer.add(lines);

    stageEl.current.add(layer);

    }, 200)
  })

data是 JSON 字符串，我尝试将data解析为obj ，将我的stageData设置为obj ，然后将相应的 JSON 属性设置为stroke 、 strokeWidth和points等值。 但是，这不起作用，它们是未定义的。 我如何访问它们？

（我还尝试跳过将stageData设置为obj的步骤，而只使用obj.stroke而不是stageData.stroke等）

Answer 1

如果您愿意，您可以跳过使用setStageData()并直接使用已解析的 object，或者默认命名为已解析的 object stageData 。 在任何情况下，当您在 Object 中有嵌套对象和值时，您可以使用正确的索引访问它们，在您的情况下，它看起来是这样的：

socket.on("canvas-data", function(data) {
  var interval = setInterval(function() {
    if (isDrawing) return;
    setIsDrawing(true);
    clearInterval(interval);
    var stageData = JSON.parse(data);
    var layer = new Konva.Layer();
    var lines = new Konva.Line(
      {
        stroke: stageData.children[0].children[0].attrs.stroke,
        strokeWidth: stageData.children[0].children[0].attrs.strokeWidth,
        points: stageData.children[0].children[0].attrs.points
      });
    layer.add(lines);

    stageEl.current.add(layer);

  }, 200);
})

看起来不是很好，但它确实有效。 您始终可以使用这个名为 JSON 路径列表的应用程序，该应用程序在 JSON object 中显示所有可能的路径及其值。