JavaScript Read response - JSON - FaceAPI

Question

I have this JSON response i need to get the values of some elements inside this response. The values i want to display is the value of "makeup" which has to elements in it which are, "eyemakeup" & "lipmakeup" i want to display it in an alert / or textbox.

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

The below is the javascript i have used so far and it is not giving me the correct values.

    <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

First add contentType:"json" your $.ajax configuration, Then you don't need to parse data to json since it's already json type So remove this line.

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

As per your json you added to question you receive a array of object To get data from first object

Try this :

For eyeMakeup use :

data[0].faceAttributes.makeup.eyeMakeup

and for lipMakeup use

data[0].faceAttributes.makeup.lipMakeup 

Or you can loop through your result data if you want to access multiple object data

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