jsonの解析されていないデータが順序付けられていないリストに表示されない

Question

私はリストとして表示したい次のjsonファイルを持っています。

[ 
{ 
"shopName": "The Coffee Connection", 
"address": "123 Lakeside Way", 
"phone": "16503600708", 
"prices": [ 
    { 
    "Cafe Latte": 4.75, 
    "Flat White": 4.75, 
    "Cappucino": 3.85, 
    "Single Espresso": 2.05, 
    "Double Espresso": 3.75, 
    "Americano": 3.75, 
    "Cortado": 4.55, 
    "Tea": 3.65, 
    "Choc Mudcake": 6.40, 
    "Choc Mousse": 8.20, 
    "Affogato": 14.80, 
    "Tiramisu": 11.40, 
    "Blueberry Muffin": 4.05, 
    "Chocolate Chip Muffin": 4.05, 
    "Muffin Of The Day": 4.55 
    } 
    ] 
} 
] 

私は価格を反復処理し、リストビューにそれらを表示したいです。私はこのデータを抽出するために以下のAjax関数と関数を使用しています。残念なことに私のコードを実行すると、空のリストがあります。

$.ajax({ 
type: 'GET', 
url: '/data/hipstercoffee.json', 
success: function(data) { 
    // console.log('success', data); 
    let widget = show(data); 
    $("#Meals").html(widget); 
} 

}); 

と他の機能があります。

JSONで位置1のエラーが発生しました。

Answer 1

pricesは、要素（オブジェクト）が1つの配列です。したがって、このオブジェクトを処理する必要があります。このようなもの。

var data = [{ 
 
    "shopName": "The Coffee Connection", 
 
    "address": "123 Lakeside Way", 
 
    "phone": "16503600708", 
 
    "prices": [{ 
 
    "Cafe Latte": 4.75, 
 
    "Flat White": 4.75, 
 
    "Cappucino": 3.85, 
 
    "Single Espresso": 2.05, 
 
    "Double Espresso": 3.75, 
 
    "Americano": 3.75, 
 
    "Cortado": 4.55, 
 
    "Tea": 3.65, 
 
    "Choc Mudcake": 6.40, 
 
    "Choc Mousse": 8.20, 
 
    "Affogato": 14.80, 
 
    "Tiramisu": 11.40, 
 
    "Blueberry Muffin": 4.05, 
 
    "Chocolate Chip Muffin": 4.05, 
 
    "Muffin Of The Day": 4.55 
 
    }] 
 
}]; 
 

 
function show(data) { 
 
    var ul = '<ul>' + 
 
    Object.keys(data[0].prices[0]).map(function(key) { 
 
     return '<li>' + key + ': ' + data[0].prices[0][key] + '</li>'; 
 
    }).join('') + 
 
    '</ul>'; 
 
    $('#result').html(ul); 
 
} 
 
show(data); //for demonstration purpose

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="result">loading...</div>

Answer 2

JSONは文字列です。最初にそれをデコードして、javascriptオブジェクトに変換する必要があります。また、配列[]が実際のデータオブジェクトにラップされていることにも注意してください。

var data = JSON.parse(data)[0]; 

ヒント：データを検索し、常に出力それは最初（にconsole.log（データ））あなたの成功メッセージで、データが構成されているかを確認します。そのように配列のようなものを見つけるのがはるかに高速です。コードが機能したら、出力を削除します。