Trouble with loading json arrays

JavaScript
1

Hi.
When I add the json string/array directly in the code it works fine but I can’t seems to load it from from a server:

var jsontext = ‘[{“Id”:176,“Name”:“370x265-vta1.jpg”,“Description”:“testimage1”,“ThumbnailUrl”:“http://server.com/Image/Thumbnail/176",“ImageUrl”:“http://server.com/Image/Cropped/176”,“UploadDate”:“\\/Date(1354703312773)\\/”},{“Id”:177,“Name”:“exterior-gallery.jpg”,“Description”:“testimage2”,“ThumbnailUrl”:“http://server.com/Image/Thumbnail/177”,“ImageUrl”:“http://server.com/Image/Cropped/177”,“UploadDate”:“\\/Date(1354703362023)\\/”},{“Id”:178,“Name”:“gold-car.jpg”,“Description”:“testimage3”,“ThumbnailUrl”:“http://server.com/Image/Thumbnail/178”,“ImageUrl”:“http://server.com/Image/Cropped/178”,“UploadDate”:"\\/Date(1354703397523)\\/”}]’;

var contact = JSON.parse(jsontext);

for (var i=0;i<contact.length;i++) {
document.write(contact[i].Name + " “);
document.write(contact[i].NumberOfImages + “<br/>”);
document.write('<img src=”‘+contact[i].ThumbnailUrl+’" border=“0”/><br/>');

document.write(contact[i].Id + “<br/>”);
}

The above works, but how can I load the array from a server?
All examples I’ve seen just use a simple string.

2

Hi JohnnyZipper and welcome to SitePoint,

Straight up how are you attempting to send the data back from the server?

3

Thank you.
I’ll try to explain what I want to do:
I have a database that get new products added. I have a url that writes the data as a string, like this:

[{“Id”:176,“Name”:“370x265-vta1.jpg”,“Description”:“testimage1”,“ThumbnailUrl”:“http://server.com/Image/Thumbnail/176",“ImageUrl”:“http://server.com/Image/Cropped/176”,“UploadDate”:“\\/Date(1354703312773)\\/”},{“Id”:177,“Name”:“exterior-gallery.jpg”,“Description”:“testimage2”,“ThumbnailUrl”:“http://server.com/Image/Thumbnail/177”,“ImageUrl”:“http://server.com/Image/Cropped/177”,“UploadDate”:“\\/Date(1354703362023)\\/”},{“Id”:178,“Name”:“gold-contract.jpg”,“Description”:“testimage3”,“ThumbnailUrl”:“http://server.com/Image/Thumbnail/178”,“ImageUrl”:“http://server.com/Image/Cropped/178”,“UploadDate”:“\\/Date(1354703397523)\\/”},{“Id”:179,“Name”:“goodNight_2_300x300.jpg”,“Description”:null,“ThumbnailUrl”:“http://server.com/Image/Thumbnail/179”,“ImageUrl”:“http://server.com/Image/Cropped/179”,“UploadDate”:"\\/Date(1354785594380)\\/”}]

I want to update a webpage with this data, hence the document write. That’s all, I need something like:
$.getJSON(‘http://server.com/JsonGallery/Index/1’, function(jsontext) {}

Regards
Johnny

4

document.write can only be run before the page finishes loading - in which case you may as well embed the JSON in the page source sent from the server.

The simplest way to update the page after it has loaded is using innerHTML to replace the content of a tag already in the page.

See http://javascriptexample.net/ajax04.php for an example.

5

Thank you.
This following code did the trick:

jQuery.ajax({
type : “GET”,
contentType:‘application/json’,
dataType:‘json’,
url : “…/deliveries/JsonGallery/Images/32”,
success : function(contact, statusText){

for (var i=0;i<contact.length;i++) {

contact[i].ThumbnailUrl
contact[i].Name
contact[i].Description

}

        },
        error: function (xhr, ajaxOptions, thrownError){
                     alert(xhr.statusText);
                     alert(thrownError);
        }

});

contentType:‘application/json’ and dataType:‘json’ was vital for it to work.