如何从getJson中提取数据 - how to extract data from getJson?

how to extract data from getJson?

本文关键字：提取数据 getJson | 更新日期: 2023-09-27

如何提取"数据"的内容，并将其加载到表单输入?情况是这样的，我有一个数据显示，它是从数据库表。现在，在显示的数据上，我放置了一个"编辑"链接。现在我的问题是，如何使用json，以便我能够加载数据点击/编辑输入表单中的数据?

  $(function() {  
    //retrieve comments to display on page  
    $.getJSON("testfile.php?jsoncallback=?", function(data) {  
        //what to code here?
    });  
  });

遍历DOM然后修改HTML

使用jquery解析器解析来自服务器的json，然后将数据放置在您想要的地方

如果您有简单的字段值映射返回，下面将为您解决这个问题

$.each(data, function(key, val) {
   $('#'+key).val(val);
});

样本数据-

{
  "name": "name",
  "address": "address"
}

但是如果返回的是嵌套数据，则需要遍历对象

我将输入字段命名为与JSON属性相同的名称。因此，如果我有以下对象:

{
    "foo": "",
    "bar": {
        "baz": ""
    }
}

字段将定义为:

<input name="foo" class="jsonItem">
<input name="bar.baz" class="jsonItem">

和JSON成功处理程序将递归地填充它们:

$.getJSON("testfile.php?jsoncallback=?", function(data) {  
    function(root) {
        var fillInputs = function(obj, prefix) {
            prefix = prefix ? prefix + '.' : '';
            for (var prop in obj) {
                if (obj.hasOwnProperty(prop)) {
                    var prefixOrName = prefix + prop;
                    var propVal = obj[prop];
                    if (typeof propVal === 'object') {
                        fillInputs(propVal, prefixOrName);
                    }
                    else {
                        $('input.jsonItem[name=' + prefixOrName + ']').val(propVal);
                    }
                }
            }
        };
        fillInputs(root, '');
});

如果您想使用id而不是名称，请确保转义选择器中的点:

prefix = prefix ? prefix + ''.' : '';
...
$('input.jsonItem#' + prefixOrName).val(propVal);

另外，由于我很懒，上面的函数没有考虑JSON对象中的数组，但这应该不难添加。