时间戳

首页 > 解决方案 > 将具有多个属性的 JSON 对象转换为 html 元素

jquery - 将具有多个属性的 JSON 对象转换为 html 元素

问题描述

我想从具有多个属性的 JSON 对象构造 html 元素。我的 JSON 文件如下所示：

[
  {
    "shape1": {
      "fill": "red",
      "stroke": "black",
      "attr": {
        "stroke-width": 5,
        "color": "#000"
      }
    }
  },

  {
    "shape2": {
      "fill": "blue",
      "stroke": "black",
      "attr": {
        "stroke-width": 3,
        "color": "#d19930"
      }
    }
  },

  {
    "shape3": {
      "fill": "green",
      "stroke": "black",
      "attr": {
        "stroke-width": 7,
        "color": "#ffeb00"
      }
    }
  }
]

我希望能够将其中的每一个都变成一个元素，例如：

<div data-fill:"green" data-stroke="black" data-stroke-width="5" data-color="#000"></div>

我一直试图访问对象的属性。我正在获取这样的对象：

$.getJSON( "/assets/svg-data/svg-forms1.json", function( data ) {
  $.each(data, function(key, value) {
    // What to do now?
  })
});

当控制台记录对象时，我可以看到它们已被提取，但我现在如何访问对象的内容并使用它们？

标签： jqueryjsonajax

解决方案

由于对象具有不同的键，并且您对键不感兴趣，因此您可以使用Object.values(value)[0]来获取具有所需属性的包含对象。

$.getJSON( "/assets/svg-data/svg-forms1.json", function( data ) {
  $.each(data, function(key, value) {
    var obj = Object.values(value)[0];
    var div = $("<div>", {
        data: {
            fill: obj.fill,
            stroke: obj.stroke,
            "stroke-width": obj.attr["stroke-width"],
            color: obj.attr.color
        }
    };
    $("#container").append(div);
  })
});

推荐阅读