Question

This is the json file I am working with

?(
{
    "title":"1",
    "description":"description",
    "site":"site",
    "image_s":"/Becki.jpg",
    "image_l":"aurel"
},
{
    "title":"2",
    "description":"2",
    "site":"1",
    "image_s":"8.jpg",
    "image_l":"aurel"
})

The question mark is replaced with a dynamic number in order to over come cross-domain restrictions. And I think this is why I am having trouble

I am trying to get both image_s but I can only read the data of the first item (if that’s the right word):

$.getJSON(surl,  function(data) {
        $.each(data, function(tete, i){
            $.each(data, function(tete, i){
                    $("<div>").addClass("box").append(
                        $("<img/>").attr("src", [this]))
                        ).appendTo("#showdata");
            });

        })
   }); 

I know there is something wrong with $("<img/>").attr("src", [this])) but that is not the problem. The problem is that the above loop only get the content of the first item (title:1 to the end not title:2)

I think if the name of the question mark wasn’t dynamic I could have done the loop from there and got its children, but I dont know how to do that in this case

And in case you need to know, I can not use server-side programing for this particular project

Can you help in any way?

Answer 1

You have to put your items (called objects in JavaScript) into array:

[
    {
        "title":"1",
        "description":"description",
        "site":"site",
        "image_s":"/Becki.jpg",
        "image_l":"aurel"
    },
    {
        "title":"2",
        "description":"2",
        "site":"1",
        "image_s":"8.jpg",
        "image_l":"aurel"
    }
]

And also change your JS:

$.each(data, function(index, item){
       $("<div>").addClass("box")
           .append($("<img/>").attr("src", [item.image_s]))
           .appendTo("#showdata");
});

Running example is shown in this JSFiddle.