2

For example, the following 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 formatted as follows:

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

How By clicking li, found to their corresponding object?

I think the method is:

  • 1, by traversing JSON find, but this way is time-consuming, not simple
  • 2, which is bound to the data key and index attributes above and through the key index to find, but if some of the more complex data structures, as too cumbersome, and do not know that there is no other better way to achieve it?

The above content is translated through Google, I do not know whether a clear description of my problem?

Here are two examples of what I wrote myself realized:

http://jsfiddle.net/18q41mfr/

1
  • It don't think traversing a Javascript object, even if it has to be parsed from JSON on-demand, even if is moderately big, will be time-consuming to a degree that a human would notice it on an on-click handler.
    – Thilo
    Dec 10, 2014 at 3:18

3 Answers 3

1

It all depends on your requirements. How large will this JSON object be and how frequently will it change?

For small or constantly changing JSON objects, it might be just fine to do the method 1.

For large and constant JSON objects, go with method 2. A cleaner way to achieve method 2 that you've suggested is to make use of the Underscore.js values and groupBy method.

  1. Merge all values in your object with the var merged = _.values(object)
  2. Group by name var formatted = _.groupBy(merged, 'name');

Resulting JSON is such:

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

Use the following code to get the value in your onclick event function on your li element:

formatted[this.innerHTML].email
0

It seems that you're already using jQuery; you can simply stuff the object references into your HTML elements using .data().

Internally, an object reference map is maintained and the HTML element stores the reference key in a special property name.

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>

0

Your second method is kind of good enough.

Maintain a global object myObjs for searching, whose keys are name and the values are object itself.

For each of the objects like:

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

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

Then bind the key to the HTML element:

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

When the element is clicked, find the key, query myObjs and find the obj. Something like (assume you are using 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.
});

Cons: extra memory

Pros: fast.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.