JavaScript读取响应-JSON-FaceAPI_Javascript_Jquery_Json_Face Api

JavaScript读取响应-JSON-FaceAPI

javascript jquery json

JavaScript读取响应-JSON-FaceAPI,javascript,jquery,json,face-api,Javascript,Jquery,Json,Face Api,我有这个JSON响应，我需要获取响应中某些元素的值。我要显示的值是“化妆”的值，其中包含的元素有“EyeCompose”和“LipCompose” 我想在警报/或文本框中显示它 [ { "faceId": "90c30c46-2a51-4754-bff4-5079caf7e322", "faceRectangle": { "top": 91, "left": 101, "width": 121, "height": 121 }, "faceAttributes": {

我有这个JSON响应，我需要获取响应中某些元素的值。我要显示的值是“化妆”的值，其中包含的元素有“EyeCompose”和“LipCompose” 我想在警报/或文本框中显示它

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


函数processImage（）{
var subscriptionKey=“mysubkey”；
变量uriBase=”https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect";
//请求参数。
变量参数={
“returnFaceId”：“true”，
“returnFaceLandmarks”：“false”，
“returnFaceAttributes”：“年龄、性别、头型、微笑、面部头发、眼镜、情绪、头发、化妆、遮挡、配饰、模糊、曝光、噪音”，
};
//显示图像。
var sourceImageUrl=document.getElementById（“inputImage”）.value；
document.querySelector（“#sourceImage”）.src=sourceImageUrl；
//执行RESTAPI调用。
$.ajax({
url:uriBase+“？”+$.param（params），
//请求头。
发送前：函数（xhrObj）{
setRequestHeader（“内容类型”、“应用程序/json”）；
setRequestHeader（“Ocp Apim订阅密钥”，subscriptionKey）；
},
类型：“POST”，
//请求主体。
数据：“{”url:“+”+sourceImageUrl+“}”，
})
.完成（功能（数据）{
//在网页上显示格式化的JSON。
$（“#responseTextArea”）.val（JSON.stringify（data，null，2））；
$（“#demo2”）.val（this.responseText）；
var data=[JSON.stringify（data，null，2）]；
var json=json.parse（数据）；
警报（json[“眼妆”]）；
})
.fail（函数（jqXHR、textStatus、errorshown）{
//显示错误消息。
var errorString=（errorThrown==“”）？“Error.”：errorThrown+“
（“+jqXHR.status+”）；
errorString+=（jqXHR.responseText==“”）吗？“”：
（jQuery.parseJSON（jqXHR.responseText.message）？
jQuery.parseJSON（jqXHR.responseText）。消息：
parseJSON（jqXHR.responseText）.error.message；
警报（错误字符串）；
});
};

首先添加

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