如何将选定的数据行从json文件绑定到输入字段（文本）？

Posted 2021-05-05

我需要将单个数据（json）行绑定到输入字段onclick事件。

<script>
                              var Jsonstr = <?php echo $resObjstr; ?>;
                              for (var key in Jsonstr) {
                                  if (Jsonstr.hasOwnProperty(key)) {
                                    //console.log(Jsonstr[key]["tile_name"] + ", " + Jsonstr[key]["id"]);
                                    $('.rowP1').append("<tr><td>"+Jsonstr[key]['id']+"</td><td><a href='#' title='"+Jsonstr[key]['tile_name']+"' id='"+Jsonstr[key]['id']+"' onClick='getDetails("+Jsonstr[key]['id']+",modifytile)'>"+Jsonstr[key]['tile_name']+"</a></td><td>"+Jsonstr[key]['detail']+"</td><td><img src='wp-content/themes/orchid-new/assets/img/"+Jsonstr[key]['image']+"' width='138' height='79' style='border:1px solid #999999;'/></td><td class='showprov' data-prov=''>"+Jsonstr[key]['providers']+"</td><td>"+Jsonstr[key]['states']+"</td><td>"+Jsonstr[key]['occurring']+"</td><td><button type='button' class='delTile' onclick='DelTiles("+Jsonstr[key]['id']+");'><i class='material-icons'>delete_forever</i></button></td></tr>");
                                  }
                              }
                          </script>
<a href="#"onclick='getDetails(tileid);'>Link</a>
function getDetails(tileid){
    console.log(tileid);
    if (tileid != null || tileid !=''){
        $('.nav-tabs a[href="#modifytile"]').tab('show');

        var jsondata = <?php echo $resObjstr; ?>;
        for (key in jsondata) {
            if (jsondata.hasOwnProperty(key)) {
                    $.each(jsondata[key], function (index, val) {
                        var txt = $('#tile_name').eq(index).val(val);
                        $('#tile_name').eq(index).val(val);
                        console.log(txt);
                    });
            }
        }
    }
}

而是显示json字符串中的最后一行。从样本图像中可以看出，json数据渲染得很好。 sample image

答案

那么，break循环然后;

for (key in jsondata) {
    if (jsondata.hasOwnProperty(key)) {
            $.each(jsondata[key], function (index, val) {
                var txt = $('#tile_name').eq(index).val(val);
                $('#tile_name').eq(index).val(val);
                console.log(txt);
                return false;
            });
            break;
    }
}

另一答案

在声明变量之后使用console.log（jsondata）来查看如何获得变量$ resObjstr，并且知道如何解析json可以通过javascript访问