Traversing JSON result and setting html accordingly

This year also my team is going through Microsoft Imagine-cup local finals Sri Lanka. Its all set to do our presentation at Microsoft Sri Lanka office in sha allah on 22nd April and The final function will held in Peradeniya University of Sri Lanka.This year our team has three members, I, Rohana K Amarakoon and Prabath M Peiris. Rohana K Amarakoon took his responsibility as the business analyst of our project and Prabath M Peiris is the main developer of ours, he has developed almost all core features of our project. I was given an excuse from my team, because I had to develop my Mini Project for this semester, I had to write a research paper and I had to consult a Neural Physician for my Momma in Colombo. Finally I took my responsibility as a Front end web site developer for our project.

For my work I had to retrieve a JSON file from a service, obviously its a Windows Server 2012 service, parse it, traverse through it and override some HTML DIV things from the result. I used jQ 1.9 to make my work done.

First my HTML was like this, where I had <li> tag.

<li class="slide">
    <h1>Hello</h1>
    <p>This is a test.</p>
</li>
<li class="slide">
    <h1>Hello Again</h1>
    <p>This is another test.</p>
</li>
<li class="slide">
    <h1>Hello For The Last Time</h1>
    <p>This is yet another test.</p>
</li>

Then the JSON was

[{"month": "September", "title": "First Title", "inhoud": "Content 1"},
{"month": "October", "title": "Second Title", "inhoud": "Content 2"},
{"month": "November", "title": "Third Title", "inhoud": "Content 3"},
]

Now I have added the below JS to my html to append the results

var slides = [
{"month": "September", "title": "First Title", "inhoud": "Content 1"},
{"month": "October", "title": "Second Title", "inhoud": "Content 2"},
{"month": "November", "title": "Third Title", "inhoud": "Content 3"},
]
var dom=$('li.slide h1'); 
$.each(slides, function(i, data){
dom.eq(i).html(data.month) 
});

For more clarification, you can see this demo here..

🙂 happy coding folks..

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s