CODEWITHSUNDEEP
jqueryjson
Boktor
Boktor

Reputation: 77

Selecting specific data from json

I'm trying to use JSON for the first time with minimal experience on jquery.

I have this JSON:

{
"stoelen":
[
    {"type": "stoel", "title": "Stoel1", "image": "/images/stoelen/1.png", "description": "Hier komt de beschrijving van de eerste foto", "secondaryimage": "/images/grid/7.png"},
    {"type": "stoel", "title": "Stoel2", "image": "/images/stoelen/2.png", "description": "Hier komt de beschrijving van de tweede foto", "secondaryimage": "/images/grid/6.png"},
    {"type": "hogestoel", "title": "Hogestoel1", "image": "/images/stoelen/1.png", "description": "Hier komt de beschrijving van de eerste foto", "secondaryimage": "/images/grid/7.png"},
    {"type": "hogestoel", "title": "Hogestoel2", "image": "/images/stoelen/2.png", "description": "Hier komt de beschrijving van de tweede foto", "secondaryimage": "/images/grid/6.png"}
]}

And i'm working on this jquery script (work in "progress"):

$(document).ready(function() {
$("#collectiestoelen li").on("click", function(){

    var stoel_id = $(this).data("id");

    $.getJSON("collectie.json",function(data){

    });
});
});

Now what i'm trying to do is when you click on a list item in a unordened list, the website loads the corresponding data from the JSON and inserts it into the html like this:

    <img class="detailimage" src="image url here">
    <div>
        <h4>title here</h4>
        <p>description here</p>
    </div>
    <img class="secondaryimage" src="secondary img url here">

Also, i'm intending on using this on 3 different pages: chairs, bigger chairs and tables.

How exactly do i do this and what's the best way to store this in JSON (--> use 3 different json files? or can you store different arrays in one JSON?) I know this is a beginner question but i've searched high and low to no avail. What i've got so far is from tutorials and a friend who tried to help me (but he didn't have much time and i didn't understand a lot of it).

Please feel free to ask any aditional info and thanks in advance!

Upvotes: 0

Views: 71

Answers (1)

jparaya
jparaya

Reputation: 1339

In a purely javascript/jQuery fashion, you need to append to a tag (like a div) all the elements from the json. For example:

<div id="container"></div>

And then in the javascript:

$('#container').html('');
$.getJSON("collectie.json",function(data){
  for(var i = 0; i < data.stoelen.length; i++)
  {
    var elem = $("<img class='detailimage' src='" + data.stoelen[i].image+"'....");
    //... define all the elements and then append:
    $('#container').append(elem);
  }    
});

The problem with this is the spaghetti code between javascript and html. My recommendation is to use knockout.js which uses a data-bind style. With this you just set the HTML and the binding and knockout updates the UI once the javascript changes.

Check the documentation and samples. It's very easy to learn and implement.

Edit

In http://jsfiddle.net/L456b/ you can see how knockout renders the json data. You just need to adjust your code.

If you just want to show one element from the JSON, say the third, you can use:

<div data-bind="with: selectedStoelen">
<img data-bind="attr: { src: image }"/>
    <div>
        <h4 data-bind="text: title"></h4>
        <p data-bind="text: description"></p>
    </div>
    <img data-bind="attr: { src: secondaryimage }"/>
</div>

function ViewModel(my_array) {
    var self = this;
    self.selectedStoelen = ko.observable(my_array[2]);
}

In case you need to change the selected stolen, say from another action in javascript, you just set vm.selectedStoelen(my_array[my_desired_index]). Everytime the observable change knockout update the html with the new information.

Greetings!

Upvotes: 1

Related Questions