JSONからHTMLへのレイアウトを作成

Question

JSONデータをHTML divタグで表示するレイアウトを作成する必要があります。

タイトルの場合はh4タグ、説明の場合はpタグ、写真の場合はimgタグのようなものです。

これを行う最も簡単で簡単な方法は何ですか？

Answer 1

これを行う方法には多少の違いがあります。 JQueryは、あなたが探しているDOM操作の種類を簡単にする傾向があります。個人的には推奨しますが、Vanilla JSを使用できない理由はありません。

あなたはjQueryのルートを行くことを選択仮定すると、ここにあなたが始めるためにJFiddleです：基本的にhttps://jsfiddle.net/Lf7j3xst/1/

あなたがにデータを追加、オブジェクトにJSONを解析し、その中の値を反復処理したいと思いますあなたの文書を適切なものにする。あなたがここで行うことは、問題の特定のjson形式に依存します。だから、私はあなたの処理がどのようなデータなのか分かりません。これは、あなたが始めるのに十分でなければならない

var parsed = JSON.parse(example); 

$.each(parsed, function(key, item) { 
    if (key == "image") { 
    $('#main').append('<img src="' + item + '" />'); 
    } 
    if (key == "title") { 
    $('#main').append('<h1>' + item + '</h1>'); 
    } 
    if (key == "paragraph") { 
    $('#main').append('<p>' + item + '</p>'); 
    } 
}) 

：

{ 
    "title": "Hello", 
    "image": "https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150", 
    "paragraph": "Lorem ipsum dolor sit amet, nam ut iracundia appellantur. An nibh impedit dolorem eos, dico definitiones vix an, pri ad simul tollit. Quo aperiri admodum appetere id. Duo harum consulatu ea, etiam altera deleniti ea sea, atqui nominavi scripserit vel cu. Ut nam errem choro iuvaret, sea natum rationibus no. Maiestatis disputationi ad mel." 
} 

コード例：私のコードをJSON

例に基づいています。しばらく時間をかけてJQueryのドキュメントを読んでください。