CODEWITHSUNDEEP
jqueryjson
josh
josh

Reputation: 839

How to access JSON data from an HTML ID

I want to check an ID in an HTML element and get the corresponding data in JSON format. 

<div id="container">
    <div class="buddy" id="user1" style="display: block;"><div class="avatar" style="display: block; background-image: url(images/1/hank1.jpg)"></div></div>
    <div class="buddy" id="user2"><div class="avatar" style="display: block; background-image: url(images/1/hank2.jpg)"></div></div> 
</div>
<div id="user_info">
    <div class="name">Hank</div> <div class="age">Age: <span>2</span></div>
    <div class="breed">Chocolate Lab</div>
</div>

JS

var userData = '{"user1":[{"name":"User1","age":"3","breed":"Chocolate Labrador"}],"user2":[{"name":"Josh"}]}';
var user = JSON.parse(userData);

$(document).ready(function(){
    var test = $('.buddy:visible').attr('id');

    $('#user_info .name').text(user.user1[0].name);
    $('#user_info .age span').text(user.user1[0].age);
    $('#user_info .breed').text(user.user1[0].breed);
});

The above JS code works and will return the correct data, but how would I use 'var test' to grab the data. Something like the below, even though it doesn't work.

var userData = '{"user1":[{"name":"User1","age":"3","breed":"Chocolate Labrador"}],"user2":[{"name":"Josh"}]}';
var user = JSON.parse(userData);

$(document).ready(function(){
    var test = $('.buddy:visible').attr('id');

    $('#user_info .name').text(user.test.name);
    $('#user_info .age span').text(user.test.age);
    $('#user_info .breed').text(user.test.breed);
});

Upvotes: 0

Views: 1862

Answers (1)

Tomalak
Tomalak

Reputation: 338426

Use square brackets to index into the object.

(Edit: Note that I have dropped the arrays from your userData, they make no sense.)

var userData = '{"user1":{"name":"User1","age":"3","breed":"Chocolate Labrador"},"user2":{"name":"Josh"}}';
var user = JSON.parse(userData);

$(document).ready(function(){
    var id = $('.buddy:visible').attr('id');

    $('#user_info .name').text(user[id].name);
    $('#user_info .age span').text(user[id].age);
    $('#user_info .breed').text(user[id].breed);
});

Upvotes: 1

Related Questions