javascript - 如何使用 jquery 将 json 普遍解析为 block ？

Question

如何通用解析json从html block [data-json Item]中获取，并将key插入其中？

我的 html，包含 data-jsonItem (json - key,key2) 和 data-jsonValue (json - subObject):

<span data-jsonItem="key1" data-jsonValue="val"></span>
<span data-jsonItem="key1" data-jsonValue="val2"></span>
<span data-jsonItem="key2" data-jsonValue="val"></span>
<span data-jsonItem="key2" data-jsonValue="val2"></span>

我的javascript

<script>
function jsonUPDATE() {
  var URL = "/json.json";
  $.getJSON(URL, function(data){
    $.each(data, function (item, value) {   
        var jsonItem = "key1";
        if (item == jsonItem) {
            $.each(value, function (i, object) {
                $.each(object, function (subI, subObject) {
                    $("[data-jsonValue='"+subI+"']").html(subObject);
                });
            });
        }
    });
  });
}
</script>

json:

{
    "key1": [
        {
            "val": 0, 
            "val2": 0, 
            "val3": 0, 
        }
    ], 
    "key2": [
        {
            "val": 0, 
            "val2": 0, 
            "val3": 0, 
        }
    ]
}

Answer 1

您可以通过遍历所有 span 元素并直接从对象中检索数据来提高逻辑效率并使其更加简洁，而不是遍历对象数组中的所有项目，基于 span 上的 data 属性。试试这个:

var data = {
  "key1": [{
    "val": 1,
    "val2": 2,
    "val3": 3,
  }],
  "key2": [{
    "val": 4,
    "val2": 5,
    "val3": 6,
  }]
}

// in your AJAX callback:
$('span').html(function() {
  var $span = $(this)
  return data[$span.data('jsonitem')][0][$span.data('jsonvalue')];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-jsonItem="key1" data-jsonValue="val"></span>
<span data-jsonItem="key1" data-jsonValue="val2"></span>
<span data-jsonItem="key2" data-jsonValue="val"></span>
<span data-jsonItem="key2" data-jsonValue="val2"></span>

请注意，我更改了对象中的 valX 值以使此逻辑的效果更清晰。