SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble with loading json arrays

    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. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Hi JohnnyZipper and welcome to SitePoint,

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

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •