JSONデータを読み込んでさまざまな部門に表示

私はJSONを初めて使い、JavaScriptで非常に錆びています。これは少し苦労しています。私はファイルにいくつかのJSONデータをロードしようとしていて、divのコンテナに分割しています。私は基本的に、JSONデータをロードし、JSONファイルのマークアップとデータに基づいてリンク、テキスト、埋め込みコードのいずれかを含むシェルページを作成するように求められています。使用されたメソッドが完全に説明されていないか、推奨されていないため、ここの結果も非常に混ざり合っています。私がいた思い付いたJSONデータを読み込んでさまざまな部門に表示

A JSON構造：

{"Week1":[ 
{"desc":"Description", "link":"linkHere", "mda":"mediaHere"} 
]}

私の関心は、ローカルファイルとして任意の綿毛なしでそれを正しくロードし、それを表示し、主です。私はこれといくつかのコーディングの助けに新鮮な視点を探しています。ここで

出典

2016-06-01 Anonymous

は一例であり、週はこれは良いスタートですdiv要素内の要素を作成

var myJson = {"Week1":[ 
 
{"desc":"Description", "link":"linkHere", "mda":"mediaHere"}, 
 
    {"desc":"Description2", "link":"linkHere2", "mda":"mediaHere2"} 
 
], 
 
"Week2":[ 
 
{"desc":"Description3", "link":"linkHere3", "mda":"mediaHere3"}, 
 
    {"desc":"Description3", "link":"linkHere3", "mda":"mediaHere3"} 
 
]}; 
 

 
$.each(myJson, function(i, week) { 
 
    $('body').append('<div class="' + i + '">' + i + '<br></div>'); 
 
    $.each(week, function(j, val) { 
 
    var text = '<ul><li>' + val.desc + '</li><li>' + val.link + '</li><li>' + val.mda + '</li></ul>'; 
 
    $('div[class="' + i + '"]').append(text); 
 
    }); 
 
});

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

Plunker

出典

2016-06-01 19:41:13

、週の内側のdiv、および配列を作成します。ありがとうございました！ JSONとhtmlを分離して代わりにローカルオブジェクトとして持つ方法はありますか？（ie：week1.json） –

はここではプラカードです。https://plnkr.co/edit/LUBlEuJAH6OvVGsBJQvw?p=preview –

優秀です。助けてくれてありがとう。 –

JSONデータを読み込んでさまざまな部門に表示

答えて

関連する問題