Need to know how to get this piece of JSON into HTML using jQuery/JS

Question

Hi! I need to know how one would put the following JSON into elements with a class name of article using jQuery AND just some basic JavaScript:

{"elements": [
    {
        "head": "story 1",
        "writer": "journalist 1"
    },
    {
        "head": "story 2",
        "writer": "journalist 2"
    }
]}

Trying to achieve the below HTML. I'm very new to JSON, etc. Looking to learn how by example..

<div class="article">
    <h5>story 1</h5>
    <p>By: journalist 1</p>

    <h5>story 2</h5>
    <p>By: journalist 2</p>
</div>

Answer 1

var data = {
    "elements": [
        {
            "head": "story 1",
            "writer": "journalist 1"
        },
        {
            "head": "story 2",
            "writer": "journalist 2"
        }
    ]};

var result = []; /* where we will store the generated HTML */

$.each(data.elements, function() {
    /* in this function, `this` refers to one of the [story] objects in the elements array */
    result.push('<h5>');
    result.push(this.head);
    result.push('</h5><p>By: ');
    result.push(this.writer);
    result.push('</p>');
});

$('<div class="article" />') /* creates the div class="article" */
    .html(result.join('')) /* merges the generated HTML from above and inserts it into the div*/
    .appendTo(document.body); /* appends the div to the page */

Answer 2

Its quite straightforward using jQuery. Use the append function:

var jsonObj = {"elements": [
    {
        "head": "story 1",
        "writer": "journalist 1"
    },
    {
        "head": "story 2",
        "writer": "journalist 2"
    }
]};

var article = $(".article");
var items = jsonObj["elements"];

var arr = [];    

for(var i = 0, len = items.length; i < len; i++)   {
   var itm = items[i];
   arr.push("<h5>" + item["head"] + "</h5><p>By: " + item["writer"] + "</p>");
}

article.append(arr.join(""));