在 jQuery 中显示来自 JSON 响应的特定值

Question

我有以下 ajax 功能：

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>");
    }
});

发回响应

{
 "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"
   }
  }
 }
}

我需要解析值 SQUARE、PORTRAIT 和 LANDSCAPE 及其关联的 uri 和 orientation 值。然后我需要能够将 uri 包装在 img 标记中。到目前为止，我只能吐出 JSON 结构，但不确定如何过滤出所需的特定字段。

Answer 1

当您不使用内联函数时，代码会变得更清晰。让我们为成功分配一个函数句柄：

jQuery.ajax({
    ...
    dataType: "json",
    success: myJSONsuccess;
    ...
});

所以必须有一个名为"myJSONsuccess":

的函数

var myJSONsuccess = function (JSONobj, StatusString, jqXHR) {
    //you probably will not need StatusString and jqXHR, so ignore them

    //There is no need to parse JSONobj. It is already parsed because of
    //dataType: "json"
    //in your ajax-command

    //This is SQUARE:
    var squ = JSONobj.entity.entries.SQUARE;

    //This is one of its properties:
    var orient = JSONobj.entity.entries.SQUARE.orientation;

    //alternatively you can write:
    var orient = squ.orientation;
    //this is exactly the same
};

Answer 2

在将其添加到标记之前，您需要进行更多处理。请记住，这些不是 HTML，而是 JSON，当您在响应中调用 parseJSON 时，您将拥有 javascript 个对象，而不是 HTML 个元素。你想要的更像是

 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 + "'/>"));
            }

        }

以及您可能希望添加到回复中的任何其他内容。

您可以为添加的每个图像添加一个 id，然后在将其附加到响应之前检查它是否已经存在 div，或者您可以查看 src 值以查看它是否会重复。

在 jQuery 中显示来自 JSON 响应的特定值

Display specific values from JSON response in jQuery

jquery

parsing

json

jquery-filter