Retrieve javascript object on click

Question

Example

Suppose I have an array of school objects in javascript...

schools =

[
    {name: "School A", phone: "Phone A", location: "Location A"},
    {name: "School B", phone: "Phone B", location: "Location B"},
    {name: "School C", phone: "Phone C", location: "Location C"},
    ...
]

... and I want to display the schools names in paragraph tags ...

<p data-name="School A">School A</p>
<p data-name="School B">School B</p>
<p data-name="School C">School C</p>

... when I click on a given school paragraph, I want to display the additional info in a separate pane. For example, when I click on School A...

<div id="separate-pane">
    <p>Phone A</p>
    <p>Address A</p>
</div>

To do this, I need to retrieve the associated object, create the additional info paragraph tags, and append them to the separate pane. How do I go about referencing the correct javascript object when clicking on a given school name paragraph in an efficient way?

Thoughts/Ideas

Use innerHTML
- On click paragraph, extract the school name from innerHTML
- Iterate through javascript array and when obj.name == innerHTML, we have found a match
Use data-name attribute
- Same as above, but obj.name == data-name

Both of these ways should work, but is there a better way to do this without having to iterate through the javascript array to find the correct object? Also, what is this process called that I am trying to accomplish?

why not "writing" all the HTML as it should be and just hide / show the panned content upon clicking on it? — fadeys.work
– fadeys.work, Commented Feb 13, 2017 at 19:32
what if attached to each school is an array of images that should also be displayed? And there are thousands of schools. Won't it over populate the DOM? — Mike B
– Mike B, Commented Feb 13, 2017 at 19:47
@MikeB - you have had a number of suggestions and answrs, and you are adding clarifications within different comment section. Can I politely suggest, given you have more information to hand with which you are able to clarify, that you update your original post to specify exactly what you need? — Kit
– Kit, Commented Feb 13, 2017 at 19:59

Barmar · Accepted Answer · 2017-02-13 20:22:27Z

1

Expanding on Nicolas's answer, when you're creating the HTML from the schools array, you can put the array index into a data attribute:

$.each(schools, function(i, school) {
    $("#links").append($("<p>", {
        "class": "link",
        text: school.name,
        data: { index: i }
    });
});

$(".link").click(function() {
    var school = schools[$(this).data("index");
    // display school information in #separate-pane
});

edited Feb 13, 2017 at 20:22

answered Feb 13, 2017 at 19:37

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Kit Over a year ago

I upvoted this as a good answer, although technically, you are changing the array to be an object, which isn't quite what the OP, Mike B, asked. Technically, Nicolas answer keeps the array of objects as-is, so he gets an upvote too ;-)

Barmar Over a year ago

Not just technically, I'm deliberately recommending that he change his design.

Kit Over a year ago

I would too if I controlled where the array object is sourced from. But that isn't specified in the question, so who knows where the array is coming from - e.g. it might be populated as the result of an AJAX call, or sourced from some 3rd-party library or dataset, etc.

Barmar Over a year ago

It's trivial to write a loop that converts the input array into my object.

Barmar Over a year ago

@Kit I've added the trivial loop to my answer.

|

Nicolas · Accepted Answer · 2017-02-13 19:34:03Z

1

I would keep the index in a data parameter in the HTML, and then use the index to find the associate school in your school array. Simple code :

<p data-name="School A" data-index="0">School A</p>
<p data-name="School B" data-index="1">School B</p>
<p data-name="School C" data-index="2">School C</p>



$(document).ready(function(){
    var school =  [
        {name: "School A", phone: "Phone A", location: "Location A"},
        {name: "School B", phone: "Phone B", location: "Location B"},
        {name: "School C", phone: "Phone C", location: "Location C"},
        ...
    ]
    $('.button').on('click', function(){
        var index = $(this).data('index');
        var data = school[index];
        //Use the data to show the info.
    });
})

answered Feb 13, 2017 at 19:34

Nicolas

8,7364 gold badges25 silver badges58 bronze badges

4 Comments

Kit Over a year ago

Good answer so I upvoted, although, if Mike B's adding data attribs anyway (for your index) then he might as well get rid of the array altogether, add 'data-phone' and 'data-location' to each paragraph element, and feed them through to his target div!

Nicolas Over a year ago

That would work as well but if he want's to add another field, let say adresse, he will need to add it directly into the HTML, the upside to have a index is that it does not alter HTML, only the array in the background. Making the code way more scalable.

Kit Over a year ago

Agreed Nicolas. This question is a little lacking in it's objectives for an answer, so there could be lots of solutions with a subjective bias towards any individual answer, any one of which could be 'better' than any other, based on a wider context of the true problem at hand and what the OP is really looking for.

Nicolas Over a year ago

That's a really good point you got there. i guess both our solutions are ok in the current context. Anyways, I hope we helped the OP to get where he wanted.

Misiakw · Accepted Answer · 2017-02-13 19:36:09Z

0

If using jquery on click listener you can use $(this).data("name") to get data stored in data-name attriburw

answered Feb 13, 2017 at 19:36

Misiakw

9228 silver badges28 bronze badges

Comments

Nikolay Ermakov · Accepted Answer · 2017-02-13 20:10:47Z

0

You can store whole school object in the created p element using jQuery data functionality and then retrieve it on element click, like below. Check demo - Fiddle Demo

var schools = [
    {name: "School A", phone: "Phone A", location: "Location A"},
    {name: "School B", phone: "Phone B", location: "Location B"},
    {name: "School C", phone: "Phone C", location: "Location C"}
]

schools.forEach(function(item){
  var $el = $('<p>' + item.name + '</p>');
  $.data($el[0], item); // store school object with the element
  $el.click(function(){
        $('#separate-pane').html( $.data(this, item).phone + ' '+ $.data(this, item).location ); // retrieve saved school object
  })  
    $('#schools').append($el);
})

answered Feb 13, 2017 at 20:10

Nikolay Ermakov

5,0712 gold badges14 silver badges19 bronze badges

Collectives™ on Stack Overflow

Retrieve javascript object on click

4 Answers 4

11 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related