How to read specific data from JSON file in JavaScript?

Question

I have a json file like this

{
  "user": {
    "age": 23,
    "firstName": "somebody"
    "height": "175"
    "weight": "75"
    "gender": "male"
  }
}

I also have a file index.js, in which I'm loading the file with

let profileData = "./profile.json";
$.getJSON(profile,processProfileData);

In the same file, I have a function

function processProfileData(data){
    let profileName = document.getElementById('firstName');
    profileName.innerHTML = data.firstName;
}

All i want to do, is to show only the "firstName" in my index.html file, in a container. My code is like this:

<div class="container">
    <div class="row">
        <div class="col-12">
            <div id="displayName"></div>
        </div>
    </div>
</div>

(I have inserted in scripts in the header all necessairy src's to run bootstrap and apex charts)

Your json consists of an object with a single key of `user`, that references a nested object. You're ignoring that nesting — Taplar, Jan 15 '20 at 17:29
Also a simple `console.log(data)` in that method would have shown you want it consists of. — Taplar, Jan 15 '20 at 17:30

score 0 · Accepted Answer · answered Jan 15 '20 at 17:31

Just need to reference the 'user' property that the data is nested in

function processProfileData(data){
    let profileName = document.getElementById('firstName');
    profileName.innerHTML = data.user.firstName;
}

And double check that you're grabbing the right HTML element. In your example your looking for an element with an id of "firstName", but in your html example it's called "displayName"

How to read specific data from JSON file in JavaScript?

1 Answers1