使用来自JSON对象的值填充输入字段

Question

我目前正在尝试使用从mysql数据库中提取的值来填充表单。由于jquery的帮助，表单非常动态。通过点击按钮可以添加或删除输入字段。 For more background information in the structure of the form check my previous。我遇到困难的方式是用数据库中的值填充此表单。我有foreach循环获取值并将它们放置在JSON对象中。如何使用这些值来自动调整字段？ JSFIDDLE

编辑 - 我知道存在的角度，烬，淘汰赛和其他js技术的工作，但由于学习的原因，我决定没有商业框架的帮助。

形式

<script type='text/template' data-template='item'> 

<ul class="clonedSection"> 
    <li style="list-style-type: none;"> 
     <label> 
      <input class="main-item" data-bind = 'firstItem' type="checkbox" />First Item</label> 
     <ul class="sub-item" data-bind ='subItem' style="display: none;"> 
      <li style="list-style-type: none;"> 
       <label> 
        <input type="checkbox" />Sub Item</label> 
      </li> 
     </ul> 
    </li> 
    <li style="list-style-type: none;"> 
     <label> 
      <input class="main-item" data-bind ='secondItem' type="checkbox" />Second Item</label> 
     <ul class="sub-item" style='display: none;' data-bind='detailsView'> 
      <li style="list-style-type: none;">How many items: 
       <select class="medium" data-bind ='numItems' required> 
        <option value="" selected>---Select---</option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
       </select> 
      </li> 
      <li style="list-style-type: none;"> 
       <div data-bind ='items'> 
        Item # {number} 
        <select> 
         <option value='initial' selected='true' >--- Select ---</option> 
         <option value='Bananas'>Bananas</option> 
         <option value='Apples'>Apples</option> 
         <option value='Oranges'>Oranges</option> 
        </select> 

       </div> 
      </li> 
     </ul> 
    </li> 
</ul> 
    </script> 

<input type='button' value='add' data-action='add' /> 
<input type='button' value='remove' data-action='remove' /> 

getItems.php

header("Content-type: application/json"); 
$db_select = $db_con->prepare("SELECT 
    p.firstItem, 
    p.subItem, 
    p.secondItem, 
    p.itemNames, 
    case itemNames when null then 0 
    when '' then 0 
    else 
    (LENGTH(itemNames) - LENGTH(replace(itemNames, ',', '')) +1) 
    end 
    as numItems 
    FROM items_list p 
    "); 

if (!$db_select) return false; 
if (!$db_select->execute()) return false; 
$results = $db_select->fetchAll(\PDO::FETCH_ASSOC); 
// check that the 'id' matches up with a row in the databse 
if(!empty($results)) 
    $responses = array(); 
    foreach ($results as $value){ 
    $responses[] = array(
     'firstItem' => ($value['firstItem'] == '1' ? true : false), 
     'subItem' => ($value['subItem'] == '1' ? true : false), 
     'secondItem' => ($value['secondItem'] == '1' ? true : false), 
     'numItems' => $value['numItems'], 
     'items' => array_map('trim', explode(',', $value['itemNames'])) 
    ); 
    } 
echo json_encode($responses); 

Answer 1

你必须提供你的数据 - 由服务器生成 - 到客户端。

2种流行的方式，我可以推荐：

• AJAX和JSON
• SCRIPT元素和JSONP

之后，你必须分析数据并建立您需要的HTML DOM元素。这可以通过模板或使用DOM功能来完成。当代码增长时，你必须创建许多js类来完成作业的不同部分。您可以使用例如MVC或MVVM模式以及...

经过很长时间，你会有自己的客户端框架，如棱角，骨干，烬等...它的确值得使用它们想，但它是你的选择......

编辑：

在这种情况下，确切你应该使用jquery ajax功能get和从你的PHP文件反序列化您的JSON。 之后，你必须为该json编写一个解析器，它可以将它转换为“thing”实例。在你的情况下，修改addItem()函数以接受json参数的最简单方法。

例如，通过一个简单的项目阵列的修改应该是这样的：

function Thing(source) { //we use this as an object constructor. 
    this.firstItem = false; 
    this.subItem = false; 
    this.secondItem = false; 
    this.numItems = 0; 
    this.items = []; // empty list of items 
    if (source) 
     this.merge(source); 
} 
Thing.prototype.merge = function (source){ 
    for (var property in source) 
     if (source.hasOwnProperty(property)) 
      this[property] = source[property]; 
}; 
Thing.prototype.toJSON = function (source){ 
return ({ 
    firstItem: this.firstItem, 
    subItem: this.subItem, 
    secondItem: this.secondItem, 
    numItems: this.numItems, 
    items: this.items 
}).toJSON(); 
}; 

function addItem(source) { 
    var thing = new Thing(source); // get the data 
    //... 
} 

function parseFormRepresentation(json){ 
    for (var i = 0, l=json.length; i<l; ++i) 
     addItem(json[i]); 
} 

$.ajax({ 
    url: "getItems.php", 
    success: function (data){ 
     parseFormRepresentation(data); 
    } 
}); 

OFC这是不完美的，解析你必须准备addItem()功能解析与递归项目树。我想你可以自己做...