JSONファイル内の新しいオブジェクトごとに新しいDOMを動的に作成する

Question

私はJavascriptの初心者で、APIを使ってプレイしようとしています。私はjsonファイルを持っています。それはレストランの毎日のメニューです。

{ 
"meta": { 
"generated_timestamp": 1489170614, 
"requested_timestamp": 1489096800, 
"ref_url": "http://www.sodexo.fi/sibat", 
"ref_title": "Sibelius-Akatemia T-talo" 
}, 
"courses": [ 
{ 
"title_fi": "Juustoista broilerpataa", 
"title_en": "Cheesy chicken stew", 
"category": "Campus-konsepti", 
"properties": "G, L", 
"desc_fi": "", 
"desc_en": "", 
"desc_se": "" 
}, 
{ 
"title_fi": "Pinaattiohukaisia, puolukkasurvosta ja kermaviilikastiketta", 
"title_en": "Spinach pancakes with lingonberry and sour cream sauce", 
"category": "Vegetarian", 
"properties": "L", 
"desc_fi": "", 
"desc_en": "", 
"desc_se": "" 
}, 
{ 
"title_fi": "Tomaattikeittoa", 
"title_en": "Tomato soup", 
"category": "Soup", 
"properties": "G, L", 
"desc_fi": "", 
"desc_en": "", 
"desc_se": "" 
}, 
{ 
"title_fi": "Mango-valkosuklaamousse", 
"title_en": "Mango and whitechocolate mousse", 
"category": "Sweet", 
"desc_fi": "", 
"desc_en": "", 
"desc_se": "" 
} 
] 
} 

そして、私は次の形式を使用して動的に食事の全てを表示しようとしています：

<h2>ref_title</h2> 
<p>title_fi(title_en)</p> 
<p>category</p> 
<p>desc_fi(desc_en)</p> 

誰もがそれで私を助けてもらえます。私はappend（）を見ていましたが、私はまだ混乱しています。ありがとうございました ！

Answer 1

だから、私はそれは、アレイ内ではなかったので、何であったかref_titleかなり確実ではなかったので、私が代わりにtitle_fiを置換：

次のコードでしょう

にすべてのコースと印刷関連情報を通じて ループ

for (var i = 0, len = menu.courses.length; i < len; i++) {  
    $(".menu").append("<h2>" + menu.courses[i].title_fi + "</h2>" 
        + "<p>" + menu.courses[i].title_en + "</p>" 
        + "<p>" + menu.courses[i].category + "</p>" 
        + "<p>" + menu.courses[i].desc_en + "(" + menu.courses[i].desc_fi + ")</p>"); 
} 

HTML：

<div class="menu"> 

</div> 

ここで便利なフィドルだ：

https://jsfiddle.net/nfnneil/vxetbnn9/1/