Question

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

       {
   "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() 并直接使用解析的对象，或者默认情况下将解析的对象命名为 stageData。在任何情况下，当您在对象中嵌套对象和值时，您可以使用正确的索引访问它们，在您的情况下，它看起来像这样：

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 路径列表的 this 应用程序，它会在 JSON 对象中向您显示所有可能的路径及其值。

如何访问这些 JSON 值？

1 个答案: