Question

当data-person的值为80时，我想显示具有匹配键的对象中的内容，即。访问{ "name": "Jhon Doe"}并在HTML中显示。

<div id="people" data-person="80"></div>

var people = {"80": { "name": "Jhon Doe"}}
var obj = JSON.parse(people);

我怎么能得到这个？谢谢！

Answer 1

使用jQuery data()并具有倍数

＆＃13;

var people = {
  "80": {
    "name": "Jhon Doe"
  },
  "90": {
    "name": "Fred Flinstone"
  }
}


$('[data-person]').text(function() {
  return people[$(this).data('person')].name
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="people" data-person="80"></div>
<div id="people2" data-person="90"></div>

＆＃13;

Answer 2

基本上您正在尝试访问作为对象属性的object。

使用Element.dataset访问data-*属性中的值，然后使用Bracket notation访问该值。

注意：根本不需要JSON.parse。 JSON.parse将JSON(Text)解析为Object

的目的

修改：要设置文字，请使用jQuery.text或Element.textContent

＆＃13;

var people = {
  "80": {
    "name": "Jhon Doe"
  }
};
var element = document.getElementById('people');
var key = element.dataset.person;
element.textContent = people[key].name;

＆＃13;

<div id="people" data-person="80"></div>

＆＃13;

从数据属性中的键中获取来自对象的数据

2 个答案: