如何填充与服务器JSON数据一个jQuery Mobile的列表视图？ [英] How to populate a jQuery Mobile list view with JSON data from server?

问题描述

我使用jQuery Mobile的使用PhoneGap的。我怎么可以拉JSON数据（从服务器），并将其填充到一个列表视图。

解决方案

有一个看jQuery.getJSON（）方法的 W3Schools的和 jQuery的API 。

这是jQuery的API示例：

  $。的getJSON（'AJAX / test.json'功能（数据）{
  变种项= [];  $。每个（数据，功能（键，VAL）{
    items.push（'＆LT;李ID =+按键+'＆GT;'+ VAL +'＆LT; /李＆GT;'）;
  }）;  $（'＆LT; UL /＆GT;'，{
    类：我的新名单，
    HTML：items.join（''）
  }）appendTo（身体）。
}）;
 

这个例子，当然，依赖于JSON文件的结构：

  {
  一：奇异的感觉
  二：明眸小眼睛
  三：小鸟球场在我家门口
}
 

  
  

使用这种结构，示例遍历所请求的数据，
  建立一个无序列表，并追加到全身。

I'm using jQuery Mobile with PhoneGap. How can I pull JSON data (from a server) and populate it into a list view.

解决方案

Have a look at the jQuery.getJSON() method on w3schools and jQuery API.

Example from jQuery API:

$.getJSON('ajax/test.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

This example, of course, relies on the structure of the JSON file:

{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

Using this structure, the example loops through the requested data, builds an unordered list, and appends it to the body.

这篇关于如何填充与服务器JSON数据一个jQuery Mobile的列表视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！