根据json数据填充输入字段

Question

我正在尝试根据我的数据生成和填充输入字段。这是我获取数据的功能：

$.post('url', { ID : ID }, function(data) {
    alert(data);
});

我提醒数据看看里面是什么，这就是：

{
    "graphs_name": [{
        "ID": "1",
        "graph_name": "test",
        "name_x": "x as",
        "name_y": "y as"
    }],
    "graphs_values": [{
        "value_x": "10",
        "value_y": "50"
    }, {
        "value_x": "20",
        "value_y": "100"
    }, {
        "value_x": "30",
        "value_y": "150"
    }, {
        "value_x": "40",
        "value_y": "200"
    }]
}

需要的是函数生成带有值的输入字段，如下所示：

有这样的功能或解决方案吗？我需要它用于我的更新功能。 Ť 提前谢谢

Answer 1

以下是waardes fiddle

的动态部分

HTML：

<form>
  <b>grafieknaam: </b><input type="text" name="grafieknaam"><br>
  <b>namen van x en y as:</b><br>
  <table id="waardes">
    <tr>
      <td>x as</td>
      <td>y as</td>
    </tr>
    <tr>
      <td><input type="text" name="xas"></td>
      <td><input type="text" name="yas"></td>
    </tr>
    <tr>
    </tr>
    <tr>
      <td><b>Waardes x as</b></td>
      <td><b>Waardes y as</b></td>
    </tr>
  </table>
</form>

在函数$ .post中使用此JS代码而不是alert：

$("input[name='grafieknaam']").val(post['graphs_name'][0]['graph_name']);
    $("input[name='xas']").val(post['graphs_name'][0]['name_x']);
    $("input[name='yas']").val(post['graphs_name'][0]['name_y']);
    var waardes = $("#waardes");
    $.each(post['graphs_values'], function(i,el){
        waardes.append("<tr>\
          <td><input type='text' name='x" + i + "' value='" + el["value_x"] + "'></td>\
          <td><input type='text' name='y" + i + "' value='" + el["value_y"] + "'></td>\
        </tr>");
    })

或根据您发布的结构fiddle

再添加一个变体

Answer 2

//Get graphs_name graphs_values
console.log(a.graphs_name[0].graph_name);
console.log(a.graphs_name[0].ID);
console.log(a.graphs_name[0].name_x);
console.log(a.graphs_name[0].name_y);

//graphs_values use as per requirement
for (i = 0; i < a.graphs_values.length; i++) {
    console.log(a.graphs_values[i].value_x);
    console.log(a.graphs_values[i].value_y);
}