Best practices for displaying a Multidimensional JSON Object using JavaScript

Within my current project, I have a JSON object structured as follows:

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

I am working with JavaScript to display the age range from this JSON object:

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

I would appreciate any assistance in resolving this matter.

javascriptjson

Answer №1

To avoid parsing the JSON, simply eliminate the single quotes around your php script tags:

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

Answer №2

delete the * from the initial sentence

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

that's all there is to it

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger a pop-up alert box when the jQuery event $(document).ready is fired within a Smarty template

I'm currently attempting to make a popup message display when the document is fully loaded. Although I have successfully integrated Google Maps on another page, this task seems to be more challenging. Below is the code snippet: <html> < ...

javascriptjquerysmarty

The input value in the HTML form was altered momentarily before reverting back to its original state

Researching this topic was quite challenging, but keep reading to find out why. My objective is to detect any changes in a form field so that I can enable the "Save" button. While this seems easy enough, there's a catch. If the user reverts the input ...

javascriptjquery

Transferring Information Across Javascript Documents

I am facing a dilemma with using JSON data generated by one script in another script. I am unsure where to begin and have considered saving the JSON string to a text file for the second script to use, but this feels like a workaround rather than a proper s ...

javascriptjson

Using jQuery to append an <option> element to a <select> tag

Every time I try to add an option to a select, the option I want to add gets appended to the first option instead of the actual select element. $(".ct [value='']").each(function() { $(this).append($("<option></option>").attr("val ...

javascriptjqueryhtml-select

Exclude "Value" and "Count" elements from the JSON when using Powershell's Add-Member command

When I add a member to my JSON, it adds unwanted elements. My goal is to only include the element inside the "Value" appearing in the resulting JSON. { "Block1": value1, "Block2": value2, "Block3": [] } I use the Add-Member cmdlet like this: $objectFrom ...

jsonpowershellpowershell-cmdlet

Checking that an object's keys are all present in an array in TypeScript should be a top priority

I am working with a const object that is used to simulate enums. My goal is to extract the keys from this object and store them in an array. I want TypeScript to generate an error if any of these keys are missing from the array. // Enum definition. export ...

javascriptarraystypescriptenums

Changing a C# Datetime type to a Date using javascript in an ASP.NET MVC Razor web application

Having trouble converting dates in JavaScript? Check out this code snippet: $(document).ready(function () { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); ...

c#javascriptjquery.netasp.net-mvc

Implement a variety of HTTP response codes for a REST endpoint

I'm currently utilizing express to serve the REST API endpoints for a simulated backend. One of the endpoints requires the ability to return different HTTP response codes, while maintaining a 200 status for the other endpoints. Here is a snippet of my ...

javascriptnode.jsrestexpress

Unraveling a specific typed object from JSON in Java after it has been serialized as an Object - Here's how!

I'm just starting out with Java! My objective: I am looking to create a collection of Objects that allows me to store objects of any type using a key (similar to a Map). I should be able to add objects of various types to this collection, such as an ...

javajsongsondeserialization

Having trouble with sending a JSON post request in Flask?

I have a setup where I am utilizing React to send form data to a Flask backend in JSON format. Here is an example of the code: add_new_user(e){ e.preventDefault() var user_details = {} user_details['fname'] = this.state.first_name user_d ...

javascriptpythonjsonnode.jsreactjs

Having trouble scrolling with Selenium WebDriver and JavaScript Executor

Can you help me locate and click on the 5th element in this list? The following is a list of all the rooms stored: @FindBy(xpath="//p[@class='css-6v9gpl-Text eczcs4p0']") List<WebElement> placeListings; Code to click on t ...

javascriptjavaseleniumwebdriver

To compare two JSON files that contain identical values but different keys in order to generate a consolidated table

My goal is to create a comprehensive table by merging data from two different JSON files. One file contains names, work positions, and ages, while the other file includes emails, names, and job roles. The challenge lies in the fact that they use different ...

javascriptjqueryjsonmustache

Is it possible to reveal a concealed element or modify the functionality of a hyperlink?

I have a link in the navigation that includes an animated icon of a + turning into an x. When the icon is in the x state, I want users to be able to close it by clicking on the icon or text. However, I am unsure of the best way to approach this. One op ...

javascriptangularjsangular-ui-router

Setting up Mongoose with Admin JS in NestJS: A Step-By-Step Guide

After successfully configuring adminJS in my Nest JS application, it now runs smoothly on localhost:5000/admin. @Module({ imports: [ import('@adminjs/nestjs').then(({ AdminModule }) => AdminModule.createAdminAsync({ ...

javascriptnode.jsmongoosenestjsadminjs

The value of the jQuery data on click event handler becomes 'undefined' when used within an AJAX handler

When I click on the Positive or Negative buttons, a jQuery event handler function is triggered. Each button passes different data objects to the handler. However, within the AJAX POST handler, I am unable to access the data from the click event. $('# ...

javascriptjqueryajaxevent-handling

Tips for managing onClick events within a conditional component

I am currently attempting to implement an onClick event on the data that I have selected from the AsyncTypeahead. My goal is to pass a callback function to the Problem component, which will only render if an item has been selected. However, after selecting ...

javascriptreactjsnext.jsbootstrap-typeahead

Leveraging a function for filtering in AngularJS

I have developed an application where the content filter changes depending on which button is clicked. I have managed to figure out the straightforward filters, but now I am attempting to create a filter that displays content within a specified range. Bel ...

javascriptangularjsfilterangularjs-filter

Tips for testing a mapbox popup using jasmine testing?

I encountered an issue with my mapbox popup while using jasmine and attempting to write a unit test for it. Here is the function in question: selectCluster(event: MouseEvent, feature: any) { event.stopPropagation(); this.selectedCluster = {geo ...

javascriptangulartypescriptkarma-jasminemapbox-gl-js

What is the best method for transferring data from Firestore into a Vue CLI project?

I am currently facing a challenge in importing data from a Firestore Database into my Vue CLI project. Despite following multiple tutorials, I have not been successful in making it work correctly. It appears that I am encountering difficulties in retrievin ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Executing Javascript functions using a variable string name

Seeking advice on the most effective approach for calling functions with variable names that adhere to a specific rule. I am exploring alternatives to using eval() due to the numerous concerns raised about its usage online. In my current setup, each group ...

javascriptreactjs