Question

我正在尝试为我的网站创建一个phonegap应用程序...但是我需要添加从网站上接收数据并在我的应用程序上显示...

我修改了网站，以json格式显示信息，如http://belladoni.co.nz/index.php?route=product/category&path=59&json

所示

如何在应用中的json中显示此信息？我怎么回应呢？如何让它显示json中提到的图像？

请帮助，请尽可能提供jsfiddle.net

我的json如下所示：

"items": [{"product_id":"85","thumb":"http:\/\/belladoni.co.nz\/image\/cache\/data\/Old Mill Road\/Flower Globe Green-164x264.jpg","name":"Antique Flower Globe","description":"Have beautifully arranged flower posies in your home all the time with this goregous glass flower gl..","price":"$22.89","special":false,"tax":"$19.90","rating":0,"reviews":"Based on 0 reviews.","href":"http:\/\/belladoni.co.nz\/decor\/Antique-Flower-Globe"},{"product_id":"54","thumb":"http:\/\/belladoni.co.nz\/image\/cache\/data\/Maytime\/FB Double Closed 1-164x264.jpeg","name":"Birds of Flight, Set of 3","description":"Beautifully graceful and delicate, these birds are fabulous and create an instant work of art w..","price":"$95.00","special":false,"tax":"$82.61","rating":0,"reviews":"Based on 0 reviews.","href":"http:\/\/belladoni.co.nz\/decor\/Flying-Bird-#1"},{"product_id":"56","thumb":"http:\/\/belladoni.co.nz\/image\/cache\/data\/Oneworld\/CHANDELIER COASTERS SET4 ES8021-164x264.jpg","name":"Chandelier Coasters Set of 4","description":"Beautiful set of 4 coasters featuring chandeliers, birds, butterflys and roses ... shabby chic at it..","price":"$29.90","special":false,"tax":"$26.00","rating":0,"reviews":"Based on 0 reviews.","href":"http:\/\/belladoni.co.nz\/decor\/Chandelier-Coasters-Set-of-4"},{"product_id":"62","thumb":"http:\/\/belladoni.co.nz\/image\/cache\/data\/Maytime\/Cushion; Circle Cotton Cinnamon-164x264.jpeg","name":"Cinnamon Circle Cushion","description":"Vibrant cotton circle cushion in a yummy cinnamon colour.\r\n\r\nPair with our Dandelion Cushion for a g..","price":"$59.90","special":false,"tax":"$52.09","rating":0,"reviews":"Based on 0 reviews.","href":"http:\/\/belladoni.co.nz\/decor\/Cinnamon-Circle-Cushion"},{"product_id":"86","thumb":"http:\/\/belladoni.co.nz\/image\/cache\/data\/Old Mill Road\/Angel-164x264.jpg","name":"Gorgeous Waiting Angel","description":"Oh so cute! \nA percentage of the proceeds generated from sales of our Waiting Angels will be do..","price":"$19.90","special":false,"tax":"$17.30","rating":0,"reviews":"Based on 0 reviews.","href":"http:\/\/belladoni.co.nz\/decor\/Gorgeous-Waiting-Angel"},{"product_id":"102","thumb":"http:\/\/belladoni.co.nz\/image\/cache\/data\/Seaco\/VintageCrownCandle003-164x264.png","name":"Vintage Crown Candle","description":"Gorgeous vintage candle bearing a royal crown.  These majestic candles command attention and th..","price":"$19.90","special":false,"tax":"$19.90","rating":0,"reviews":"Based on 0 reviews.","href":"http:\/\/belladoni.co.nz\/decor\/Vintage-Crown-Candle"},{"product_id":"103","thumb":"http:\/\/belladoni.co.nz\/image\/cache\/data\/Seaco\/VintageCrownCandle002-164x264.png","name":"Vintage Crown Candle","description":"Gorgeous vintage candle bearing a royal crown.  These majestic candles command attention and th..","price":"$19.90","special":false,"tax":"$19.90","rating":0,"reviews":"Based on 0 reviews.","href":"http:\/\/belladoni.co.nz\/decor\/Vintage-Crown-Candle-1081"},{"product_id":"59","thumb":"http:\/\/belladoni.co.nz\/image\/cache\/data\/Seaco\/VintageCrownCandle001-164x264.png","name":"Vintage Crown Candle","description":"Gorgeous vintage candle bearing a royal crown.  These majestic candles command attention and th..","price":"$19.90","special":false,"tax":"$19.90","rating":0,"reviews":"Based on 0 reviews.","href":"http:\/\/belladoni.co.nz\/decor\/Vintage-Crown-Candle-Set-of-Four"},{"product_id":"57","thumb":"http:\/\/belladoni.co.nz\/image\/cache\/data\/Seaco\/VintageParisCrownCushion-164x264.jpg","name":"Vintage Paris Cushion","description":"A beautiful Provincial cushion that will give a french touch to any decor.  Linen filled c..","price":"$52.17","special":false,"tax":"$52.17","rating":0,"reviews":"Based on 0 reviews.","href":"http:\/\/belladoni.co.nz\/decor\/Vintage-Paris-Cushion"},{"product_id":"58","thumb":"http:\/\/belladoni.co.nz\/image\/cache\/data\/Seaco\/VintageParisCrownCushion70x35-164x264.jpg","name":"Vintage Paris Cushion Long","description":"A beautiful Provincial cushion that will give a french touch to any decor.  \n\nLinen filled..","price":"$50.00","special":false,"tax":"$43.48","rating":0,"reviews":"Based on 0 reviews.","href":"http:\/\/belladoni.co.nz\/decor\/Vintage-Paris-Cushion-Long"}]

Answer 1

请参阅我的jsfiddle http://jsfiddle.net/3SakE/4/

你的JSON看起来很糟糕，所以它无法正常工作，但你应该能够理解。

$.getJSON('http://belladoni.co.nz/index.php?route=product/category&path=59&json', function(data){

    $.each(data['items'], function(key, val){
        $('#results').append("<p>"+key+"</br>"+val+"</p>"); 
    });

    //or iterate through each item in the object like so
    $('#results').text(data.items.price);

});

Answer 2

您可以使用Mustache.js（模板库）。

或者您必须手动迭代思考每个JSON对象并构建HTML并附加到您的网站正文。

我的建议是通过Mustache.js。

JSON到HTML for phonegap应用程序

2 个答案: