如何使用Jquery从JSON API获取用户个人资料信息？

Question

我正在创建一个简单的脚本，以显示来自JSON API的活动用户列表，如果您单击列出的用户之一，则该脚本应显示用户信息，例如用户名，名称，描述，城市，电子邮件，头像和带有选择位置的静态地图。静态地图的Google API。

我应该怎么做才能做到这一点？

我可以获取活动用户列表，到目前为止，这是我所做的。

注意：我是新手。

 $.getJSON('profile.json', function(data) {

            var output = '<ul>';


            $.each(data, function(key, val) {

                //check the user if is active then display the active users
                  if(val['active'] == true)
                  {
                output += '<li><a href="val.avatar">'+ val.first_name + " " + val.last_name + " " + val.username +'</a></li>';

                }
                    });
        });

样本json.api

{"id":987,"username":"jstephensre","active":false,"password":"8de90ec658d72b54ef0b270611ef9eb6241fa59b77b5c98b9bffb4fd631a4b10","first_name":"Johnny","last_name":"Stephens","last_login":"6/7/2016","email":"jstephensre@opensource.org","avatar":"https://robohash.org/nihilpariaturrepudiandae.jpg?size=50x50&set=set1","gender":[],"favorites":{"book-isbn":"117187617-3","color":"#6adf06","drugs":["Zicam Cold Remedy Ultra Rapidmelts","BUTALBITAL, ACETAMINOPHEN AND CAFFEINE"]},"coordinates":{"lat":"8.65972","lng":"-75.12809"}},
{"id":988,"username":"dtorresrf","active":true,"password":"443f2261332613a2da952d05a25ceec2d8eb9ed177ce830b3b4d6fbbe536e2c0","first_name":null,"last_name":"Torres","last_login":null,"email":"atorresrf@facebook.com","avatar":"https://robohash.org/idnihilut.bmp?size=50x50&set=set1","gender":["Female","Female"],"favorites":{"book-isbn":null,"color":"#a04fce","drugs":["Cockroach, American","Lisinopril and Hydrochlorothiazide"]},"coordinates":{"lat":"9.86667","lng":"6.71667"}},
{"id":989,"username":"jsmithrg","active":false,"password":"4e9750746ad03f82717ebd702c03c92749de1cbc820798ab409fb5e6760101ad","first_name":null,"last_name":"Smith","last_login":null,"email":"tsmithrg@creativecommons.org","avatar":null,"gender":["Male"],"favorites":{"book-isbn":null,"color":"#3bff1e","drugs":["Yellow Pine","Meprobamate","GenRx Daily Defense Antifungal"]},"coordinates":{"lat":"-16.00528","lng":"-41.29722"}},
{"id":990,"username":"sroserh","active":false,"password":"ab83a77062c8ee868f3b966d50a8ee39f63e3cec81349b83b81adcd3c6fa5da3","first_name":"Sarah","last_name":null,"last_login":"12/19/2015","email":"sromerorh@about.me","avatar":null,"gender":[],"favorites":{"book-isbn":"117541910-9","color":"#ac8603","drugs":["MORUS ALBA POLLEN","enema","Altipres-B"]},"coordinates":{"lat":"32.26616","lng":"35.00893"}},
{"id":991,"username":"sholmesri","active":false,"password":"11802fc53531079cdf8033e6772ffc5ac47c8ea8a453b66e8ac8df9ae29d9543","first_name":"Susan","last_name":"Holmes","last_login":"1/28/2016","email":"sholmesri@mozilla.com","avatar":"https://robohash.org/doloreshicqui.png?size=50x50&set=set1","gender":["Male","Male"],"favorites":{"book-isbn":"658583882-3","color":"#04da21","drugs":["Tempra","Estradiol Transdermal System"]},"coordinates":{"lat":"-39.23686","lng":"-70.9197"}},
{"id":992,"username":"rhayesrj","active":true,"password":"beae358b1eb873bac4fa640410520157f26738ee4d2de1144f30101c6af8e259","first_name":"Rachel","last_name":"Hayes","last_login":"12/7/2015","email":null,"avatar":"https://robohash.org/teneturautest.jpg?size=50x50&set=set1","gender":["Male"],"favorites":{"book-isbn":"291847889-X","color":null,"drugs":["BUDESONIDE","Doxorubicin Hydrochloride","Hydrocodone Bitartrate and Acetaminophen"]},"coordinates":{"lat":"-20.58333","lng":"48.53333"}},
{"id":993,"username":"jcampbellrk","active":false,"password":"9602ccbe7599aefea9a25eb05ab2ede44302f57fd153bad07aa0f5a2f46be537","first_name":"Joan","last_name":"Campbell","last_login":"8/29/2016","email":"jcampbellrk@bravesites.com","avatar":"https://robohash.org/numquamutquae.png?size=50x50&set=set1","gender":["Male"],"favorites":{"book-isbn":"588841638-X","color":"#7c5963","drugs":[]},"coordinates":{"lat":"57.6531","lng":"14.6968"}},
{"id":994,"username":"ejamesrl","active":false,"password":"55b1d2418621cda82225bf569f5f30c5b5fcfe5ae7aef6b1e3418a97335b47ab","first_name":"Elizabeth","last_name":"James","last_login":"1/14/2016","email":"ejamesrl@geocities.jp","avatar":null,"gender":["Female"],"favorites":{"book-isbn":"026417147-0","color":"#ba1d5c","drugs":["Losartan Potassium and Hydrochlorothiazide","Ramipril"]},"coordinates":{"lat":"54.64043","lng":"32.87811"}},
{"id":995,"username":"krogersrm","active":true,"password":"c5a8921245a345fb133193f8ceb14021469b4f42a7d945e835b9497081fb7130","first_name":"Kathleen","last_name":null,"last_login":"6/13/2016","email":"khansenrm@nationalgeographic.com","avatar":"https://robohash.org/mollitiasuscipitmagnam.jpg?size=50x50&set=set1","gender":["Male"],"favorites":{"book-isbn":"636138809-3","color":"#1c858e","drugs":["Tramadol Hydrochloride","iBlanc Restora-Bright"]},"coordinates":{"lat":"12.71402","lng":"121.51242"}},
{"id":996,"username":"sperkinsrn","active":false,"password":"c0f48289a4145ffd34374f7236ea4e650df57cff11f4f77b865a44dde410cfb8","first_name":"Sarah","last_name":"Perkins","last_login":"8/31/2016","email":null,"avatar":"https://robohash.org/consequaturculpavelit.png?size=50x50&set=set1","gender":["Male","Male"],"favorites":{"book-isbn":"561211079-0","color":null,"drugs":["Caduet"]},"coordinates":{"lat":"43.30472","lng":"124.32778"}},
{"id":997,"username":"jlanero","active":false,"password":"0430117ff30143b0f3727527f62346351582a396cc60a5bf599e674cc34c07c5","first_name":"Jack","last_name":"Lane","last_login":"3/20/2016","email":null,"avatar":null,"gender":[],"favorites":{"book-isbn":"819102101-3","color":null,"drugs":["RIFAMPIN"]},"coordinates":{"lat":"51.8796","lng":"4.5059"}},
{"id":998,"username":"wroserp","active":true,"password":"626e6d1a1a92ff6e741ae21e3bbbae265000ca0f87306590c2344d4130dd57a9","first_name":"Willie","last_name":"Rose","last_login":"10/16/2016","email":null,"avatar":null,"gender":["Male"],"favorites":{"book-isbn":"108540866-3","color":null,"drugs":["OXYGEN","Garnier Fructis Antidandruff"]},"coordinates":{"lat":"57.58167","lng":"83.76917"}},
{"id":999,"username":"sphillipsrq","active":false,"password":"de0a87749bb04b2630ac6dbeb7259947383189afb6c2b458d80a15f6881b0439","first_name":"Stephanie","last_name":"Phillips","last_login":"11/24/2016","email":"sphillipsrq@wikia.com","avatar":"https://robohash.org/laborerepellendustemporibus.jpg?size=50x50&set=set1","gender":[],"favorites":{"book-isbn":"721916787-3","color":"#9eee74","drugs":[]},"coordinates":{"lat":"51.0016","lng":"21.71474"}},
{"id":1000,"username":"phicksrr","active":false,"password":"2a27d007956e55da298aa3fb427a5a8ed7a8d661f4d4a2e340a98026996521eb","first_name":"Phyllis","last_name":"Hicks","last_login":"2/14/2016","email":null,"avatar":"https://robohash.org/sedsednon.bmp?size=50x50&set=set1","gender":["Female","Female"],"favorites":{"book-isbn":"268196481-4","color":null,"drugs":["Ibuprofen"]},"coordinates":{"lat":"-6.22625","lng":"106.0253"}}]

Answer 1

1st：首先在href属性中set unique id

第二： anchor标签的Onlcik阻止anchor标签的default behaviour 。 并从href属性中获取id 。

第三：再次循环json data ，如果current id为current id则与当前单击的id进行比较，然后使用return false;中断循环return false; 然后prepare如下information 。

 var data =[{"id":987,"username":"jstephensre","active":false,"password":"8de90ec658d72b54ef0b270611ef9eb6241fa59b77b5c98b9bffb4fd631a4b10","first_name":"Johnny","last_name":"Stephens","last_login":"6/7/2016","email":"jstephensre@opensource.org","avatar":"https://robohash.org/nihilpariaturrepudiandae.jpg?size=50x50&set=set1","gender":[],"favorites":{"book-isbn":"117187617-3","color":"#6adf06","drugs":["Zicam Cold Remedy Ultra Rapidmelts","BUTALBITAL, ACETAMINOPHEN AND CAFFEINE"]},"coordinates":{"lat":"8.65972","lng":"-75.12809"}}, {"id":988,"username":"dtorresrf","active":true,"password":"443f2261332613a2da952d05a25ceec2d8eb9ed177ce830b3b4d6fbbe536e2c0","first_name":null,"last_name":"Torres","last_login":null,"email":"atorresrf@facebook.com","avatar":"https://robohash.org/idnihilut.bmp?size=50x50&set=set1","gender":["Female","Female"],"favorites":{"book-isbn":null,"color":"#a04fce","drugs":["Cockroach, American","Lisinopril and Hydrochlorothiazide"]},"coordinates":{"lat":"9.86667","lng":"6.71667"}}, {"id":989,"username":"jsmithrg","active":false,"password":"4e9750746ad03f82717ebd702c03c92749de1cbc820798ab409fb5e6760101ad","first_name":null,"last_name":"Smith","last_login":null,"email":"tsmithrg@creativecommons.org","avatar":null,"gender":["Male"],"favorites":{"book-isbn":null,"color":"#3bff1e","drugs":["Yellow Pine","Meprobamate","GenRx Daily Defense Antifungal"]},"coordinates":{"lat":"-16.00528","lng":"-41.29722"}}, {"id":990,"username":"sroserh","active":false,"password":"ab83a77062c8ee868f3b966d50a8ee39f63e3cec81349b83b81adcd3c6fa5da3","first_name":"Sarah","last_name":null,"last_login":"12/19/2015","email":"sromerorh@about.me","avatar":null,"gender":[],"favorites":{"book-isbn":"117541910-9","color":"#ac8603","drugs":["MORUS ALBA POLLEN","enema","Altipres-B"]},"coordinates":{"lat":"32.26616","lng":"35.00893"}}, {"id":991,"username":"sholmesri","active":false,"password":"11802fc53531079cdf8033e6772ffc5ac47c8ea8a453b66e8ac8df9ae29d9543","first_name":"Susan","last_name":"Holmes","last_login":"1/28/2016","email":"sholmesri@mozilla.com","avatar":"https://robohash.org/doloreshicqui.png?size=50x50&set=set1","gender":["Male","Male"],"favorites":{"book-isbn":"658583882-3","color":"#04da21","drugs":["Tempra","Estradiol Transdermal System"]},"coordinates":{"lat":"-39.23686","lng":"-70.9197"}}, {"id":992,"username":"rhayesrj","active":true,"password":"beae358b1eb873bac4fa640410520157f26738ee4d2de1144f30101c6af8e259","first_name":"Rachel","last_name":"Hayes","last_login":"12/7/2015","email":null,"avatar":"https://robohash.org/teneturautest.jpg?size=50x50&set=set1","gender":["Male"],"favorites":{"book-isbn":"291847889-X","color":null,"drugs":["BUDESONIDE","Doxorubicin Hydrochloride","Hydrocodone Bitartrate and Acetaminophen"]},"coordinates":{"lat":"-20.58333","lng":"48.53333"}}, {"id":993,"username":"jcampbellrk","active":false,"password":"9602ccbe7599aefea9a25eb05ab2ede44302f57fd153bad07aa0f5a2f46be537","first_name":"Joan","last_name":"Campbell","last_login":"8/29/2016","email":"jcampbellrk@bravesites.com","avatar":"https://robohash.org/numquamutquae.png?size=50x50&set=set1","gender":["Male"],"favorites":{"book-isbn":"588841638-X","color":"#7c5963","drugs":[]},"coordinates":{"lat":"57.6531","lng":"14.6968"}}, {"id":994,"username":"ejamesrl","active":false,"password":"55b1d2418621cda82225bf569f5f30c5b5fcfe5ae7aef6b1e3418a97335b47ab","first_name":"Elizabeth","last_name":"James","last_login":"1/14/2016","email":"ejamesrl@geocities.jp","avatar":null,"gender":["Female"],"favorites":{"book-isbn":"026417147-0","color":"#ba1d5c","drugs":["Losartan Potassium and Hydrochlorothiazide","Ramipril"]},"coordinates":{"lat":"54.64043","lng":"32.87811"}}, {"id":995,"username":"krogersrm","active":true,"password":"c5a8921245a345fb133193f8ceb14021469b4f42a7d945e835b9497081fb7130","first_name":"Kathleen","last_name":null,"last_login":"6/13/2016","email":"khansenrm@nationalgeographic.com","avatar":"https://robohash.org/mollitiasuscipitmagnam.jpg?size=50x50&set=set1","gender":["Male"],"favorites":{"book-isbn":"636138809-3","color":"#1c858e","drugs":["Tramadol Hydrochloride","iBlanc Restora-Bright"]},"coordinates":{"lat":"12.71402","lng":"121.51242"}}, {"id":996,"username":"sperkinsrn","active":false,"password":"c0f48289a4145ffd34374f7236ea4e650df57cff11f4f77b865a44dde410cfb8","first_name":"Sarah","last_name":"Perkins","last_login":"8/31/2016","email":null,"avatar":"https://robohash.org/consequaturculpavelit.png?size=50x50&set=set1","gender":["Male","Male"],"favorites":{"book-isbn":"561211079-0","color":null,"drugs":["Caduet"]},"coordinates":{"lat":"43.30472","lng":"124.32778"}}, {"id":997,"username":"jlanero","active":false,"password":"0430117ff30143b0f3727527f62346351582a396cc60a5bf599e674cc34c07c5","first_name":"Jack","last_name":"Lane","last_login":"3/20/2016","email":null,"avatar":null,"gender":[],"favorites":{"book-isbn":"819102101-3","color":null,"drugs":["RIFAMPIN"]},"coordinates":{"lat":"51.8796","lng":"4.5059"}}, {"id":998,"username":"wroserp","active":true,"password":"626e6d1a1a92ff6e741ae21e3bbbae265000ca0f87306590c2344d4130dd57a9","first_name":"Willie","last_name":"Rose","last_login":"10/16/2016","email":null,"avatar":null,"gender":["Male"],"favorites":{"book-isbn":"108540866-3","color":null,"drugs":["OXYGEN","Garnier Fructis Antidandruff"]},"coordinates":{"lat":"57.58167","lng":"83.76917"}}, {"id":999,"username":"sphillipsrq","active":false,"password":"de0a87749bb04b2630ac6dbeb7259947383189afb6c2b458d80a15f6881b0439","first_name":"Stephanie","last_name":"Phillips","last_login":"11/24/2016","email":"sphillipsrq@wikia.com","avatar":"https://robohash.org/laborerepellendustemporibus.jpg?size=50x50&set=set1","gender":[],"favorites":{"book-isbn":"721916787-3","color":"#9eee74","drugs":[]},"coordinates":{"lat":"51.0016","lng":"21.71474"}}, {"id":1000,"username":"phicksrr","active":false,"password":"2a27d007956e55da298aa3fb427a5a8ed7a8d661f4d4a2e340a98026996521eb","first_name":"Phyllis","last_name":"Hicks","last_login":"2/14/2016","email":null,"avatar":"https://robohash.org/sedsednon.bmp?size=50x50&set=set1","gender":["Female","Female"],"favorites":{"book-isbn":"268196481-4","color":null,"drugs":["Ibuprofen"]},"coordinates":{"lat":"-6.22625","lng":"106.0253"}}]; var output = '<ul>'; $.each(data, function(key, val) { if(val['active'] == true) { output += '<li><a class="new_href" href="'+val.id+'">'+ val.first_name + " " + val.last_name + " " + val.username +'</a></li>'; } }); output +='</ul>'; $('#list').html(output); $(document).on('click','.new_href',function(event){ event.preventDefault(); var current_id = $(this).attr('href'); var details='<ul>'; $.each(data, function(key, val) { if(val['active'] == true && val['id']==current_id) { details+="<li>username : "+val['username']+" </li>"; details+="<li>firstname : "+val['first_name']+" </li>"; details+="<li>lastname : "+val['last_name']+" </li>"; details+="<li>email : "+val['email']+" </li>"; return false; } }); details+="</ul>"; $('#info').html(details); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="list"> </div> <div id="info"> </div>