如何訪問這些 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 中顯示所有可能的路徑及其值。