Display specific values from JSON response in jQuery

Question

I have the following ajax function:

jQuery.ajax({
    method: "PUT",
    dataType: 'json',
    callback: null,
    url: urlLocation,
    data: saveImage,
    success: function(response){
        $(".response").html(JSON.stringify(response, null, '&nbsp').replace(/\n/g, '<br>'));
        $(".response").css('font-family', 'Knowledge');
    },
    error: function (data) {
    $(".share-link").html("<div class='alert alert-danger'><p>Couldn't send photo: <b>"+ imageid.value + "</b></p></div>");
    }
});

that sends back a response

{
 "status": {
  "code": 200,
  "description": "OK"
 },
 "entity": {
  "entityType": "EntityMap",
  "entryKeyType": "Orientation",
  "entryValueType": "ImageResource",
  "entries": {
   "SQUARE": {
    "uri": "http://www.url.com/image-file",
    "orientation": "SQUARE",
    "entityType": "ImageResource"
   },
   "PORTRAIT": {
    "uri": "http://www.url.com/image-file",
    "orientation": "PORTRAIT",
    "entityType": "ImageResource"
   },
   "LANDSCAPE": {
    "uri": "http://www.url.com/image-file",
    "orientation": "LANDSCAPE",
    "entityType": "ImageResource"
   }
  }
 }
}

I need to parse out the values SQUARE, PORTRAIT and LANDSCAPE and their associated uri and orientation values. Then I need to be able to wrap the uri in an img tag. So far, I can just spit out the JSON structure, but not sure how to filter out the specific fields needed.

Answer 1

You need to do more processing before you add this to the markup. Remember these are not HTML these are JSON and when you call parseJSON on the response you will have javascript objects not HTML elements. What you want is more like

 var obj = $.parseJSON(response.responseText);
        for (var property in obj.entity.entries) {
            if (obj.entity.entries.hasOwnProperty(property)) {
                $(".response").append($("<img alt='test' src='" + obj.entity.entries[property].uri + "'/>"));
            }

        }

And any other things you might want to add to the response.

You can add an id to each image that you add and then check to see if it already exists before appending it to the response div, or you can look at the src value to see if it would be a duplicate.