jquery load specific content from a file

Question

i'm trying to get specific text from a plain-text organized by tags or whatever; and then load on a existing div or create on the fly a div to load on it.

dont know if with json it could be ok

i've tried creating a .json file data_prod.js like this:

{"articles":
        [
            {
                "title1":"bla bla bla"
            },
            {
                "title2":"bla bla bla"
            },
            ...
        ]
}

in my html code i've written that function :

    $.getJSON("data_prod.js",function(data)
        {
            var div_data = data.title1;
            $(div_data).appendTo("#tt_mn");
        });

the content i'd like to load in these case is only title1 in a div existing called #tt_mn

there's something wrong

now i've modified.

data.json

{
   "articles": [{ "title": "fresa" }, { "title": "limon" }, { "title": "naranja" } ]
}

test_json.html

<div id="op">push me</div>  
<div id="tt_mn" data-articleidx="1"></div>
<script>
$('#op').live("click", function() {
    // get the index of the article for which the title should be obtained
    var idx = $(this).data('articleidx');
    $.getJSON("data.json", function(data) {
        // be safe and the data parameter conformity prior to extracting the title
        if (data && data.articles && idx < data.articles.length) {
            $("<div>" + data.articles[idx].title + "</div>").appendTo("#tt_mn");
        }
    });
}); 
</script>

EXAMPLE

Answer 1

You should first change a bit your json so you have the same "title" property for all items:

{
   "articles": [{ "title": "title 1" }, { "title": "title 2" }, ... ]
}

Then, in the callback of the .getJSON() function, go through all your items and generate html markup with the title values.

I think the most efficient way of applying markup is build an array of strings representing the desired markup and append it all at once. A for loop will also be more efficient over the jquery .each() or .map().

$.getJSON("data_prod.js", function(data) {
    var titles = [];
    for (var i=0; i<data.articles.length;i++) {
        titles.push("<div>" + data.articles[i].title + "</div>");
    }
    $(titles.join('')).appendTo("#tt_mn");
});

EXAMPLE

---

Edit:

So if you like to display one specific title from a button click, you could add a "data-" attribute specifying which article you'd like to get the title:

<button data-articleidx="1">Get title</button>

And then:

$('button').click(function(e) {
    // get the index of the article for which the title should be obtained
    var idx = $(this).data('articleidx');
    $.getJSON("data_prod.js", function(data) {
        // be safe and the data parameter conformity prior to extracting the title
        if (data && data.articles && idx < data.articles.length) {
            $("<div>" + data.articles[idx].title + "</div>").appendTo("#tt_mn");
        }
    });
}); 

I still suggest you change the json to have the same property name for titles. I can't think of a reason why they are actually "title1", "title2"...