How to print Multidimensional JSON Object via JavaScript?

Question

In my project, there is a JSON object like this:

{
"face": [
 {
 "attribute": {
 "age": {
 "range": 5,
 "value": 35
 },
 "gender": {
 "confidence": 99.9974,
 "value": "Male"
 },
 "glass": {
 "confidence": 98.3809,
 "value": "None"
 },
 "pose": {
 "pitch_angle": {
 "value": 2e-05
 },
 "roll_angle": {
 "value": -6.70428
 },
 "yaw_angle": {
 "value": 0.005689
 }
 },
 "race": {
 "confidence": 61.7833,
 "value": "Black"
 },
 "smiling": {
 "value": 10.932
 }
 },
 "face_id": "b8b25a0fbb13f149a87438047fdd3e18",
 "position": {
 "center": {
 "x": 50.973236,
 "y": 55.583333
 },
 "eye_left": {
 "x": 36.641119,
 "y": 47.448167
 },
 "eye_right": {
 "x": 65.265207,
 "y": 45.143333
 },
 "height": 42.166667,
 "mouth_left": {
 "x": 41.970316,
 "y": 68.837667
 },
 "mouth_right": {
 "x": 65.547445,
 "y": 68.029667
 },
 "nose": {
 "x": 52.064964,
 "y": 58.712167
 },
 "width": 61.557178
 },
 "tag": ""
 }
],
"img_height": 629,
"img_id": "9ea3cab5193d005e89be75fb92f1bd88",
"img_width": 431,
"session_id": "8e57472a5d1542a4943237e0bfd8798f",
"url": null
}

And there is a JavaScript script like this where I want to display age- range:

<script>
 var txt1 = '<?php echo $response['body']; ?>';
 objF = JSON.parse(txt1);
 document.getElementById("fac").innerHTML = objF.face[0].attribute.age.range;
</script>

So please help me to solve this.

• Sabbir Ahmad: PHP var $response['body'] contain the JSON object.

Answer 1

Just remove the ' signs from around your php script tags, and there will be no need to parse the JSON:

var txt1 = <?php echo $response['body']; ?>;
document.getElementById("fac").innerHTML = objF.face[0].attribute.age.range;

• Sabbir Ahmad: Thanks @Adam, i've removed ' from the script but it doesnt working. is my printing statement of JavaScript correct? i think, in objF.face[0].attribute.age.range section, has some problem.
• Adam: can you share the source, you see in the browser?

Answer 2

remove the ' from first line

var txt1 = <?php echo $response['body']; ?>;
objF = JSON.parse(txt1);
document.getElementById("fac").innerHTML = objF.face[0].attribute.age.range;

that is it