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

Instead of using <div>, try substituting it with a different HTML page

Seeking assistance on an HTML page project that involves jQuery, CSS, and HTML without server-side integration. Encountering an issue when attempting to replace a <div> with content from another HTML file saved on my computer. The main page code sni ...

javascriptjqueryhtmlajaxweb

Tips for displaying external JavaScript code in an alert box:

Is there a way to display external JavaScript code in an alert or another location by accessing the variable value s_code? (function(){ var newscript = document.createElement('script'); newscript.type = 'text/javascript'; ...

javascriptjavascript-objectsdom-events

To successfully handle this file type in Next.js, make sure you have the necessary loader configured as no loaders are currently set up to process this specific file

I encountered an issue when trying to load an image from a local directory in my Next.js application Failed to compile ./pages/components/image.png 1:0 Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to hand ...

javascriptreactjswebpacknext.jsurlloader

I am looking for a highly specialized jQuery selector that fits my exact requirements

Hello everyone, I'm encountering an issue with a jQuery selector. Here is the HTML code snippet: <div id="Id_Province_chzn"> <a href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1"> <span> + this.default_tex ...

javascriptjqueryhtmlcss

Unusual hue in the backdrop of a daisyui modal

https://i.stack.imgur.com/fLQdY.png I have tried various methods, but I am unable to get rid of the strange color in the background of the Modal. Just for reference, I am using Tailwind CSS with Daisy UI on Next.JS. <> <button className='btn ...

javascriptcssreactjstailwind-cssdaisyui

Does anyone else have trouble with the Smtp settings and connection on Servage.net? It's driving me crazy, I can't figure it out!

Whenever I attempt to connect to send a servage SMTP, it gives me this error message: SMTP connect() failed. I have tried using the following settings: include('res/mailer/class.phpmailer.php'); $mail->SMTPDebug = 2; include('res/mai ...

javascriptphpcssemailsmtp

NodeJS video streaming feature does not close the connection when the user disconnects or navigates to a different page

Currently, I'm in the process of developing a video streaming server using nodeJS with express. To monitor the progress status, I am utilizing the "request-progress" module. So far, everything pertaining to video streaming is working perfectly. Howev ...

javascriptnode.jsexpressvideostream

I'm encountering a problem with my vuejs application

I am currently working on a new vuejs 2 app and encountered an unexpected error. ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/Customers.vue Module build failed: S ...

javascriptvue.jsvuejs2vue-componentvue-router

Setting up a CentOs Linux environment to host and run a node.js server

Just installed node.js on my new VPS server. I have written a basic script called "server.js" and it is currently running on port 8080. The location of the script is in the "var/www/html/" directory. However, whenever I try to access my domain, it only dis ...

javascriptlinuxnode.jscentos

The function getComputedStyle(elem).getPropertyValue('fontSize') returns incorrect values when the font size of the element is specified in em units

My current issue involves trying to obtain the font size of an element in the following manner: getComputedStyle(MyTargetElement , "").getPropertyValue('font-size') The result is coming back as 16px, when it should actually be 14px. W ...

javascriptcssreactjs

iOS posts being rejected by Devise Registrations controller

Currently, I am in the process of developing a RoR backend for an iOS application. My approach involves using Devise (3.2.4) to secure the API. Nevertheless, I encountered an issue while attempting to register a user via http://localhost:3000/users as prov ...

iosruby-on-railsrubyjsondevise

Executing a Function within UseEffect

I need help calling the function onSaveInputValue within the useEffect to make sure that the value is passed to the childInputValue hook whenever the page loads. const onSaveInputValue = (value) => { setChildInputValue(value); consol ...

javascriptreactjsreact-hooksreact-functional-component

Creating a unique navigation route in React

My application has a consistent layout for all routes except one, which will be completely different from the rest. The entire application will include a menu, body, footer, etc. However, the one-off route should be standalone without these elements. How ...

javascriptreactjsroutes

The structure of NodeJS Express API calls revolves around handling asynchronous events

Currently, I am working on a hobby project using NodeJS and Express, but I am finding it challenging to manage asynchronous calls. There is a bug that I would like the community's help in resolving. I have set up an Express layout where I send post r ...

javascriptnode.jsapiexpressasynchronous

trigger opening a bootstrap modal programmatically

I have a modal setup using Bootstrap with the code below: <div className="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true" > &l ...

javascriptreactjsbootstrap-4

Sharing information among v-for divisions - Vue.js

I am currently delving into the world of VueJS. While my code may not be the most elegant, it does the job almost as intended. The issue I am facing is that the API provides the title and href separately in different v-for loops, even though each loop only ...

javascriptvue.jsaxios

The issue arising where the callback function fails to execute after making an AJAX POST request

Within my function, I have an AJAX call that I want to make reusable. When the AJAX call is successful, I need to callback a function. var ajaxPostCall = function(data , url ,callback){ // Return the $.ajax promise $.ajax({ data: data, dataType: ...

javascriptjqueryajaxcallback

Encountering an issue with Angular 5.2 application build on VSTS build server: Running into "CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" error

Out of nowhere, the builds began failing with the following error : 2019-01-03T12:57:22.2223175Z EXEC : FATAL error : CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory error MSB3073: The command "node node_modules/webpack/bin/w ...

javascriptjquerynode.jsangularnpm

ASP.Net ScriptMethod produces JSON with no content

I am currently using JavaScript to call a ScriptService method named GetPerson(). I am encountering an issue where the method is returning a JSON string that appears to be empty instead of an object string. Even when attempting to return a new DateTime obj ...

c#asp.netjsonweb-servicesresponseformat

Any suggestions on resolving the "script timeout" issue while running a script using Python's SeleniumBase Library?

Recently starting to use Python, I am currently using Python's seleniumbase library to scrape a website and need to periodically run this fetch script. While experimenting, I encountered a script timeout error when the response time exceeded around 95 ...

javascriptajaxfetch-apiseleniumbase