アクセスJSONのプロパティ

Question

私は内容がフォームから来ているその中に次の内容のJSONファイル

{"title":"Json 10","body":"lorem","price":"12"} 

を持っているが、ユーザーはこのデータを提出することができwehere。

後でこのデータを自分のウェブサイトに表示する必要があります。そのため私はウィジェットを使用しています。ウィジェットがjsonをつかんで、レストラン - ウィジェットコンテナ部門のコンテンツを入れてください

私の質問は次のとおりです。このコードでは

var jsonp_url = "http://localhost:8000/uploads/json/10_dailydish.json"; 
     jQuery.getJSON(jsonp_url, function(result) { 
     //alert(result.html); 
     $('#restaurant-widget-container').html(result.title); 

     }); 

は私の「レストラン・ウィジェット・コンテナ」にJSONファイルの内容を表示します。

div内にタイトル、本文、価格を表示する必要があります。しかし、上のコードでは、タイトルを表示しています。

私も

$('#restaurant-widget-container').append(result.title).append(result.body); 

これでarroundの演奏基本的に動作しますが、私は良い方法があることを感じています。

Answer 1

あなたはシンプルで反復処理できるよりも、あなたのJSONオブジェクトのキーがわからない場合：あなたは、直接アクセスしたい場合は、キーを知っている。しかし、あなたがアクセスしたい

for (var k in result) { 
    // This print out the value 
    console.log("The value" + result[k]); 
} 

あなたが2つの方法を持っているよりも：

var v = result["mykey"]; 

これは、いくつかの設定変数の中に文字列としてキーを持っていれば良いことです。

以上の直接的：

var v = result.mykey; 

あなたの質問の2番目の部分はjqueryのを使用して値をHTMLをエメンドについてです。

ここにあなたのコード：

$('#restaurant-widget-container').append(result.title).append(result.body); 

これは単なるID ＃レストラン - ウィジェットコンテナたDOM要素に文字列を追加します。

ここでは、htmlを適切にデザインして記述する必要があります。あなたはあなたのページでそれを直接行い、jqueryを使って値を更新したり、テンプレートエンジンのラインハンドルバーを使ってアクセスすることができます。

選択肢は、ケースとフレーバーの複雑さによって異なります。

jqueryと命令的な手法を使用して簡単なhtmlの例を書くことができます。

// Reset the current content to avoid concatenation 
// of previous results. 
$('#restaurant-widget-container').html(''); 

var $resultTitle = $('<h1></h1>').text(result.title); 

var $resultBody = $('<div></div>').html(result.body); 

var $resultPrice = $('<span></span>').text('Price: ' + result.price + ' $'); 

$('#restaurant-widget-container') 
    .append($resultTitle) 
    .append($resultBody) 
    .append($resultPrice); 

ここでは動作例を示します。

$(function() { 
 

 
function showResults(result) { 
 
    // Reset the current content to avoid concatenation 
 
    // of previous results. 
 
    $('#restaurant-widget-container').html(''); 
 

 
    var $resultTitle = $('<h1></h1>').text(result.title); 
 

 
    var $resultBody = $('<div></div>').html(result.body); 
 

 
    var $resultPrice = $('<span></span>').text('Price: ' + result.price + ' $'); 
 

 
    $('#restaurant-widget-container') 
 
     .append($resultTitle) 
 
     .append($resultBody) 
 
     .append($resultPrice); 
 
} 
 
    
 
    $('button').click(function(ev) { 
 
    ev.preventDefault(); 
 
    showResults({"title": "My cool title!", "body": "All you need to write goes here...", "price": 123.45}); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="restaurant-widget-container"> 
 
    </div> 
 
<hr/> 
 
<button>Show</button>