基於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> 

使用這個JS在你的函數$。員額，而不是報警代碼：

$("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); 
}