如何使用切换按钮从JSON文件中提取特定信息？

Question

I am creating a contact book for my website and i have added a JSON file. So far i have all of the information pulling into the website however i do not want all of this to be visible until i click the toggle button for each individual.

JSON Code:

[ { "picture": "img/Profile/1.jpeg", "name": "Peter Banks", "age": 29, "gender": "Male", "email": "petebanks@hotmail.com", "phone": "+44 (963) 542-3770", "address": "708 Wyckoff Avenue, Sandston, Massachusetts, 7957" }, { "picture": "img/Profile/2.jpeg", "name": "Kent Beard", "age": 25, "gender": "Male", "email": "kentbeard@gmail.com", "phone": "+44 (826) 537-2956", "address": "115 Harkness Avenue, Corinne, Nebraska, 3131" }, { "picture": "img/Profile/14.jpeg", "name": "Judy Brooks", "age": 31, "gender": "Female", "email": "judybrooks@hotmail.co.uk", "phone": "+44 (807) 513-2489", "address": "204 Albemarle Terrace, Elizaville, New Hampshire, 724" } }

Javascript file

$( document ).ready(function() {

$.getJSON('generated_contacts.json', function(data) {
       var output="<div>";
        $.each(data, function(i, item) {
            output+="<img src='" + data[i].picture + "'/></p><p>" +
        data[i].name + "</p><p>" +
        data[i].gender + ", " +
        data[i].age + "</p><p>" +
        data[i].email + "</p><p>" +
        data[i].phone + "</p><p>" +
        data[i].address + "</p><p>" ;
        });

        output+="</div>";
        $("#placeholder").html(output);
});

});

I will have 18 toggle buttons for 18 individuals, but my problem is that I am unsure how to make each separate button pull in individual data?

Answer 1

One way is to have a unique ID for each of your user object (name?) and map it to the button id or a data-attribute in the button. In the onClick event handler, you can use this id to pull out data.