Question

I am receiving content from a JSON call and I would like to populate 3 object that returned with response in news_item class as follows:

<div class="news"> 
        <div class="news_item" style="margin-left: 0 !important;">

        <div class="ni_image">
            <a href="/HaberDetay/TITLE/ID"><img src="IMAGE"width="203" height="109"/></a>
        </div>
        <div class="ni_text">
            <div class="ni_text_title">TITLE</div>
            <div class="ni_text_content"> 
                CONTENT
            </div>
        </div>
        </div> 
</div>

I am able to receive the data as follows. but not quite sure how to populate the news_item div as above. I also need to clear, news and replace everything with data from JSON response.

var newsByCity = JSON.parse(msg);

                $.each(newsByCity, function (key, item) {
                    alert("Code: " + item.City + " ,Name: " + item.Title + " ,Country: " + item.County);

                });

any pointers? how can i do this?

EDIT: i m getting back TITLE, ID, CONTENT etc. I just need to see how i can create this new divs.

Answer 1

Mind you jQuery templating is still in beta (can be DL here: https://github.com/jquery/jquery-tmpl)

Create a jQuery template of this HTML, with the Title/ID/Content etc where they will be appearing ${TITLE}/etc. Basically like this:

<div class="news_item" style="margin-left: 0 !important;">
    <div class="ni_image">
        <a href="/HaberDetay/${TITLE}/${ID}"><img src="IMAGE"width="203" height="109"/></a>
    </div>
    <div class="ni_text">
        <div class="ni_text_title">${TITLE}</div>
        <div class="ni_text_content"> 
            ${CONTENT}
        </div>
    </div>
</div> 

Then just create the template and append it to news.

$('#yourTemplateScriptArea').tmpl(newsByCity).appendTo('.news');

Here’s an intro on Templating if you’ve never done it before.
http://stephenwalther.com/archive/2010/11/30/an-introduction-to-jquery-templates.aspx