Question

我想检查HTML元素中的ID并以JSON格式获取相应的数据。

<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);
});

上面的JS代码可以正常工作并返回正确的数据，但是如何使用＆＃39; var test＆＃39;抓住数据。如下所示，即使它不起作用。

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);
});

Answer 1

使用方括号索引对象。

（编辑：请注意，我已从您的userData中删除了数组，但没有任何意义。）

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);
});

如何从HTML ID访问JSON数据

1 个答案: