JavaScript 读取响应 - JSON - FaceAPI

Question

我有这个 JSON 响应，我需要获取此响应中某些元素的值。我要显示的值是 "makeup" 的值，其中包含 "eyemakeup" 和 "lipmakeup" 的元素我想在警报/或文本框中显示它。

[
 {
   "faceId": "90c30c46-2a51-4754-bff4-5079caf7e322",
"faceRectangle": {
  "top": 91,
  "left": 101,
  "width": 121,
  "height": 121
},
"faceAttributes": {
  "smile": 0,
  "headPose": {
    "pitch": 0,
    "roll": -0.8,
    "yaw": -2.3
  },
  "gender": "male",
  "age": 30.3,
  "facialHair": {
    "moustache": 0.1,
    "beard": 0.5,
    "sideburns": 0.3
  },
  "glasses": "NoGlasses",
  "emotion": {
    "anger": 0.013,
    "contempt": 0.003,
    "disgust": 0,
    "fear": 0,
    "happiness": 0,
    "neutral": 0.983,
    "sadness": 0.001,
    "surprise": 0
  },
  "blur": {
    "blurLevel": "medium",
    "value": 0.28
  },
  "exposure": {
    "exposureLevel": "goodExposure",
    "value": 0.61
  },
  "noise": {
    "noiseLevel": "medium",
    "value": 0.39
  },
  "makeup": {
    "eyeMakeup": false,
    "lipMakeup": true
  },
  "accessories": [],
  "occlusion": {
    "foreheadOccluded": false,
    "eyeOccluded": false,
    "mouthOccluded": false
  },
  "hair": {
    "bald": 0.02,
    "invisible": false,
    "hairColor": [
      {
        "color": "brown",
        "confidence": 1
      },
      {
        "color": "black",
        "confidence": 0.78
      },
      {
        "color": "blond",
        "confidence": 0.23
      },
      {
        "color": "other",
        "confidence": 0.13
      },
      {
        "color": "red",
        "confidence": 0.09
      },
      {
        "color": "gray",
        "confidence": 0.03
        }
       ]
       }
       }
       }
  ]

下面是我目前使用的javascript，但没有给出正确的值。

    <script type="text/javascript">
function processImage() {

    var subscriptionKey = "mysubkey";


    var uriBase = "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect";

    // Request parameters.
    var params = {
        "returnFaceId": "true",
        "returnFaceLandmarks": "false",
        "returnFaceAttributes": "age,gender,headPose,smile,facialHair,glasses,emotion,hair,makeup,occlusion,accessories,blur,exposure,noise",
    };

    // Display the image.
    var sourceImageUrl = document.getElementById("inputImage").value;
    document.querySelector("#sourceImage").src = sourceImageUrl;

    // Perform the REST API call.
    $.ajax({
        url: uriBase + "?" + $.param(params),

        // Request headers.
        beforeSend: function(xhrObj){
            xhrObj.setRequestHeader("Content-Type","application/json");
            xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", subscriptionKey);
        },

        type: "POST",

        // Request body.
        data: '{"url": ' + '"' + sourceImageUrl + '"}',
    })

    .done(function(data) {
        // Show formatted JSON on webpage.
        $("#responseTextArea").val(JSON.stringify(data, null, 2));
        $("#demo2").val(this.responseText);

         var data =[JSON.stringify(data, null, 2)];
         var json = JSON.parse(data); 
         alert(json["eyeMakeup"]);       
   })
         .fail(function(jqXHR, textStatus, errorThrown) {
        // Display error message.
        var errorString = (errorThrown === "") ? "Error. " : errorThrown + " 
  (" + jqXHR.status + "): ";
        errorString += (jqXHR.responseText === "") ? "" : 
 (jQuery.parseJSON(jqXHR.responseText).message) ? 
            jQuery.parseJSON(jqXHR.responseText).message : 
 jQuery.parseJSON(jqXHR.responseText).error.message;
        alert(errorString);
    });
};
    </script>

Answer 1

首先添加contentType:"json"你的$.ajax配置，然后你不需要将数据解析为 json 因为它已经是 json 类型所以去掉这一行。

var data =[JSON.stringify(data, null, 2)];

根据您添加到问题中的 json，您收到了一组对象从第一个对象获取数据

试试这个：

用于眼妆：

data[0].faceAttributes.makeup.eyeMakeup

用于唇妆

data[0].faceAttributes.makeup.lipMakeup

或者，如果您想访问多个对象数据，您可以遍历结果数据

$.each(data,function(obj,function(){
  console.log(obj.faceAttributes.makeup.eyeMakeup);
  console.log(obj.faceAttributes.makeup.lipMakeup);
})

Answer 2

$.ajax( {  
    url:'data.php',  
    data:{  
         'a' : 1,  
         'b': 2 
    },  
    type:'post',  
    cache:false,  
    dataType:'json',  
    success:function(data) {  
       do something... 
    },  
    error : function() {  
       do something
    }  
});

尝试像上面那样使用 ajax

JavaScript 读取响应 - JSON - FaceAPI

JavaScript Read response - JSON - FaceAPI

javascript

jquery

json

face-api