Question

例如，以下JSON：

{
  "A" : [{
    name : "admin",
    email:"xxx@msn.com"
  },{
    name : "anly",
    email:"xxx@msn.com"
  }]
  "B" : [{
    name : "beta",
    email:"xxx@msn.com"
  },{
    name : "b",
    email:"xxx@msn.com"
  }]
}

Html格式如下：

<ul>
    <li>admin</li>
    <li>anly</li>
    <li>besta</li>
    <li>bestb</li>
</ul>

如何点击li，找到相应的对象？

我认为方法是：

1，遍历JSON查找，但这种方式耗费时间，而不是简单
2，这是绑定到上面的数据键和索引属性并通过键索引来查找的，但是如果一些比较复杂的数据结构太麻烦了，也不知道没有其他更好的方法可以实现它？

以上内容是通过谷歌翻译的，我不知道是否清楚描述了我的问题？

以下是我自己写的两个例子：

http://jsfiddle.net/18q41mfr/

Answer 1

这一切都取决于您的要求。这个JSON对象有多大，它会改变多久？

对于小型或不断变化的JSON对象，执行方法1可能很好。

对于大型和常量JSON对象，请使用方法2.实现方法2的一种更简洁的方法是使用Underscore.js values和groupBy方法。

使用var merged = _.values(object)
按名称分组var formatted = _.groupBy(merged, 'name');

结果JSON就是这样：

{ 
    admin: {
        name : "admin",
        email:"xxx@msn.com"
    },
    anly: {
        name : "anly",
        email:"xxx@msn.com"
    },
    ...
}

使用以下代码获取li元素的onclick事件函数中的值：

formatted[this.innerHTML].email

Answer 2

你的第二种方法有点好。

维护一个用于搜索的全局对象myObjs，其密钥为name，值为object。

对于每个对象，例如：

var obj = {
    name : "beta",
    email:"xxx@msn.com"
}

myObjs[obj[name]] = obj; // If the name is not unique, add an id.

然后将密钥绑定到HTML元素：

<li data-key="admin">admin</li>

点击元素后，找到key，查询myObjs并找到obj。类似的东西（假设你使用的是jQuery）：

$('ul').on('click', 'li', function() {
    var $this = $(this);
    var name = $this.data('key');
    var obj = myObjs[name];
    console.log(obj);         // Here is your corresponding object.
});

缺点：额外记忆

优点：快。

Answer 3

好像你已经在使用jQuery;您可以使用.data()将对象引用填充到HTML元素中。

在内部，维护对象引用映射，HTML元素将引用键存储在特殊属性名称中。

var items = {
    "type_a" : [{
        name : "test",
        color : "red"
    },{
        name : "test",
        color : "blue"
    }],
    "type_b" : [{
        name : "test",
        color : "orange"
    },{
        name : "test",
        color : "yellow"
    }]
};

for (var i in items) {
    for (var j = 0; j < items[i].length; j++) {
        $('<li>', {text: items[i][j].name})
          .data(items[i][j])
          .appendTo('#items');
    }
}

$("#items").on("click", "li", function() {
    var obj = $(this).data();

    $("#detaila").html('name:' + obj.name + '<br>color:' + obj.color + '<br>' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="items"></ul>
<div id="detaila"></div>
<div id="detailb"></div>

JSON解析为HTML，对象如何映射到相应的HTML？

3 个答案: