Mamulasa Mamulasa - 2 months ago 15
JSON Question

Access Json Properties

I have a Json file with the following content in it

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


The content is comming from a form, wehere the user can submit this data.

Later I need to give the user the ability to display this data on his website. Therefor I am using a widget. The widget is grabbing the json an put the content inside the restaurant-widget-container div


My Question is: How can I access each property. With this code

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);

});


to display the content of the json file in my "restaurant-widget-container".

I need to display the title, body and price inside the div. But with the code above I am just display the title.

I also played arround with

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


This basically works, but I have the feeling that there is a better way.

Answer

If you don't know the keys of your JSON object, than you could iterate over with a simple:

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

But if you want to access directly, as you know the keys you want to access to, than you have 2 methods:

var v = result["mykey"];

This is good if you have the keys as strings in some config variable.

Or more directly:

var v = result.mykey;

The second part of your question is about emend the HTML with the values using jquery.

Here your code:

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

This just add the strings to the dom element with id #restaurant-widget-container.

Here you should design and write your html properly. You could do that directly in your page and then access using jquery to update the values, or using a template engine line handlebars.

The choice depends on the complexity of your case and your flavors.

So you could write a simple html example using just jquery and with an imperative approach.

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

Here is a working example.

$(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>

Comments