Question

寻找从任何json调用自动生成JQuery-Mobile列表视图的方法。我假设我会将结果加载到数组中并迭代键/值并将结果填充到ul，并根据结果数创建li ...无法弄清楚如何获取键的长度然后循环通过它们用密钥和val填充<li>。想要让它工作而不必知道任何json值。

这是一个不起作用的起点：

$(document).ready(function(){
$.getJSON("json_mdb.php", function(data){
     for (var i = 0; i < data.length; i++) {
        $.each(data[i], function(key, val) {
            //console.log(key + ":" + val); 
            $('#myUL').html("<li>" + key + " : " + val + "</li>");  
        });
      } 
});                 
});


<div data-role="page" id="index" data-theme="d">

<div data-role="content">   
<div id="inventory">
    <ul data-role='listview' id='myUL' data-inset='true' class='ui-listview ui-listview-inset ui-corner-all ui-shadow'>
    </ul>
</div>
</div>

</div>

示例JSON：

[{"LastName":"Doe","FirstName":"John","ID":"DJ0000"},{"LastName":"Doe","FirstName":"Jane","ID":"DA0000"}]

Answer 1

创建HTML，例如：

<div id='hiddenDiv'>
<ul><li>
    <label for='hiddenInput'></label>
    <input name='hiddenInput' type='text' />
</li></ul>
</div>
<form action="blah.php" method="post" class="coolFormCSSClass">
    <ul id='listViewUl' data-role="listview" ...>

    </ul>
</form>

然后解析您的JSON，并为每个数据行克隆hiddenDiv，并使用您喜欢的选择器更改标签和输入的值，然后附加到$（“。listViewUl”）。

循环将类似于：

var obj = { one:1, two:2, three:3, four:4, five:5 };

jQuery.each(arr, function() {

//do stuff to the label (like fill in the text,
// remove the class and set some properties)        
$(".hiddenDiv label").doSomethingReallyCool()
//do stuff to the input
$(".hiddenDiv input").doSomethingReallyCool2()

var clonedLee = $(".hiddenLi").clone().appendTo(".listViewUl");
    });

只要克隆源是隐藏的（因此它不会打扰任何人）并且不受任何形式的影响（因此它不会弄乱你的服务器代码），你可以随心所欲地玩它，一旦你开心，你克隆它并将它附加到你想要的地方。

......为什么医学不能这样？

Answer 2

使用$.each迭代JSON，您可以创建一个通用函数来处理它：

function handleJSON(arrObject) {
    for (var i = 0; i < arrObject.length; i++) {
        $.each(arrObject[i], function(key, val) {
            console.log(key + ":" + val);
        });
    }
}

演示：http://jsfiddle.net/9z4VH/

创建AJAX调用以显示任何简单的键/值JSON

2 个答案: