Question

I have a JSON array that is parsed from a database.

$.getJSON(… ,

the data is iterated over with $.each then placed by name into table1.

function(geojson) {
    $.each(geojson.features, function(i, feature) {
        var id = feature.properties.id;
        var name = feature.properties.name;
        var otherDetails = feature.properties.otherDetails;

        // Populate table1 with clickable links
        $("#table1 table").append('<tr><td><a href="#" onclick="['+id+']; return false;">'+name+'</a></td></tr>')
            //populate table2 with name
            .click(function(){
                $("#table2 table").append('<tr><td><a">'+name+' '+otherDetails+'</a></td></tr>')
        })
    });
});

This is all great, just what I want.
Each feature ‘name’ in the table is clickable, I would like when clicked that another table (table2) is populated with ‘name’ and ‘otherDetails’ for only the one record.
The code above nearly gets me there, but intend of populating table2 with the name of the feature clicked, it populates table2 with the full array of features nearly a copy of table1, I think because it is still inside of the $.each.
How can I stop the .each iteration in the nested append?
Thanks in advance.

Answer 1

Add a click handler to the rows of table1. When clicked, pull out the name to put into a new row of table2.

$('#table1 table').on('click', 'tr', function()
{
    var name = $(this).find('a').text();
    $('#table2 table').append('<tr><td><a">' + name + '</a></td></tr>');
});

An alterate way to maintain the data would be to use data attributes. This would allow you to use the otherinfo data too.