如何使用jquery将json普遍解析为块？

Question

How to universally parse json to get from the html block [data-json Item], and insert the key into it?

my html, contains data-jsonItem (json - key,key2) and 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>

my 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

Instead of looping through all items in the array of objects you could improve the efficiency of the logic and make it more succinct by instead looping through all the span elements and retrieving the data from the object directly, based on the data attributes on that span . Try this:

 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> 

Note that I changed the valX values in the objects to make the effect of this logic clearer.