2017-05-03 17 views
0

如果在我似乎無法找到答案之前已經詢問此問題,我很抱歉。我如何動態顯示我的json解碼數據到ul

下面是我的Json解碼陣列:

cart_id:1 
cart_items: 
    1: 
    cost:4 
    name:"Titleist Pro V1" 
    quantity:4 
    2: 
    cost:1 
    name:"Titleist Pro V1x" 
    quantity:1 

我怎麼能動態顯示到使用JQuery或JavaScript的HTML呢?我想通過使用這個可以顯示單個變量:

$result['cart_items']['1']['name']; 

這會給我「Titleist Pro V1」的回報。 我正在努力應對來自各方的大量錯誤,並且覺得代碼本身太雜亂無法粘貼在這裏。如果有人可以請告訴我如何使用下一個粘貼格式的循環或其他內容來動態創建這些數據,那將會很棒。

<ul> 
    <li> $name x $quantity <br> cost: $cost</li> 
    <li> $name x $quantity <br> cost: $cost</li> 
</ul> 

編輯:我的意思是顯示頂部列表位爲純HTML,但計算器的轉換太實際的名單,我希望它仍然可以理解的。

注意:我的數據是通過laravel/php從數據庫中引入的。我 收到一個JSON編碼的文件,然後我着手進行解碼:

$result = jQuery.parseJSON(result); 

我需要能夠採取任何結果的數量和擺放物品,其成本的列表。對不起,如果這是一個很大的麻煩,我現在正在與Laravel拼搏,事情感覺非常過分。

感謝您提前給予您的所有幫助!

+0

謝謝阿曼拉瓦特! –

回答

0

假設你的JSON是在下面的格式

$result = { 
    "cart_id" : 1, 
    "cart_items": { 
     "1": { 
     cost:4, 
     name:"Titleist Pro V1", 
     quantity:4 
     }, 
     "2": { 
     cost:1, 
     name:"Titleist Pro V1x", 
     quantity:1 
     } 
    } 
}; 

您可以使用jQuery each方法來遍歷對象使用以下

var b = "<ul>"; 

$.each($result['cart_items'], function(property, value) { 
    b += "<li>" + value['cost'] * value['quantity'] + "<br/>" + "cost " + value['cost'] + "</li>"; 
}); 

b += "</ul>"; 

$(".container").html(b); 

Codepen代碼生成<ul>https://codepen.io/anon/pen/xdLEBb

+0

這是爲我做的!謝謝! –

相關問題