доступа JSon Свойства

Question

У меня есть файл в формате JSON со следующим содержанием в нем

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

Содержание пришедшего из формы, wehere пользователь может представить эти данные.

Позже мне нужно предоставить пользователю возможность отображения этих данных на своем веб-сайте. Поэтому я использую виджет. Виджет захватывает json и помещает содержимое в ресторан-виджет-контейнер div

Мой вопрос: Как я могу получить доступ к каждому имуществу. С помощью этого кода

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. Но с приведенным выше кодом я просто показываю название.

Я также играл Arround с

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

В основном это работает, но у меня есть ощущение, что есть лучший путь.

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; 

Вторая часть вашего вопроса о HTML, исправлять со значениями с помощью JQuery.

Вот код:

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

Это просто добавить строки к элементу йот с идентификатором # ресторан-виджет-контейнер.

Здесь вы должны правильно спроектировать и написать свой html. Вы можете сделать это непосредственно на своей странице, а затем получить доступ с помощью jquery для обновления значений или с помощью ручек строковых машин шаблона.

Выбор зависит от сложности вашего дела и ваших вкусов.

Итак, вы можете написать простой пример html, используя только jquery и с императивным подходом.

// 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>