JavaScript读取响应 - JSON - FaceAPI

时间:2017-08-04 07:02:00

标签: javascript jquery json face-api

我有这个JSON响应我需要获取此响应中的一些元素的值。 我想要显示的值是“化妆”的值,其中包含的元素是“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>

2 个答案:

答案 0 :(得分:0)

首先添加{.1}} $ .ajax配置, 然后你不需要将数据解析为json,因为它已经是json类型 所以删除这一行。

contentType:"json"

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

试试这个:

对于eyeMakeup使用:

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

并使用lipMakeup

data[0].faceAttributes.makeup.eyeMakeup

或者,如果要访问多个对象数据,可以遍历结果数据

data[0].faceAttributes.makeup.lipMakeup 

答案 1 :(得分:0)

$.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