2017-08-04 94 views
1

我有這個JSON響應,我需要得到這個響應中的一些元素的值。 我想要顯示的值是「化妝」的價值,其中有元素,它是,「eyemakeup」&「lipmakeup」 我想顯示它在警報/或文本框中。JavaScript閱讀應用 - JSON - FaceAPI

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

回答

0

首先添加contentType:"json"您的$就配置, 那麼你不需要的數據解析成JSON,因爲它已經JSON類型 所以刪除此行。

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

根據您的JSON你加入到質疑您會收到對象 的陣列從第一對象

獲取數據試試這個:

對於eyeMakeup使用:

data[0].faceAttributes.makeup.eyeMakeup 

並用於lipMakeup使用

data[0].faceAttributes.makeup.lipMakeup 

或者你可以通過你的結果數據環路,如果你想訪問多個對象數據

$.each(data,function(obj,function(){ 
    console.log(obj.faceAttributes.makeup.eyeMakeup); 
    console.log(obj.faceAttributes.makeup.lipMakeup); 
}) 
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像上述高達