Javascript 如何使用Jquery从JSON API获取用户配置文件信息？

我正在创建一个简单的脚本来显示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>';

                }
                    });
        });

第一：首先在href属性中设置唯一id

第二：仅限锚定标签防止锚定标签的默认行为。并从href属性中获取id

第三：再次循环json数据，并与当前单击的id进行比较（如果是当前id），然后使用return false中断循环；然后准备以下信息

var data=[{id:987，用户名：jstephensre，活动：false，密码：8de90ec658d72b54ef0b270611ef9eb6241fa59b77b5c98b9bffb4fd631a4b10，名字：约翰尼，姓氏：斯蒂芬斯，最后登录：6/7/2016，电子邮件：jstephensre@opensource.org，头像：https://robohash.org/nihilpariaturrepudiandae.jpg?size=50x50&set=set1，性别：[]，收藏夹：{书名isbn:117187617-3，颜色：6adf06，药物：[齐卡姆冷疗超快速药水，布他比妥，对乙酰氨基酚和咖啡因]}，坐标：{lat:8.65972，lng:-75.12809}， {id:988，用户名：dtorresrf，活动：true，密码：443f2261332613a2da952d05a25ceec2c2d8eb9ed177ce830b4b4d6fbbebe536e2c0，名字：null，姓氏：Torres，姓氏：null，电子邮件：atorresrf@facebook.com，头像：https://robohash.org/idnihilut.bmp?size=50x50&set=set1，性别：[女性，女性]，收藏夹：{book isbn:null，颜色：a04fce，药物：[蟑螂，美国，赖诺普利和氢氯噻嗪]}，坐标：{lat:9.86667，lng:6.71667}， {id:989，用户名：jsmithrg，活动：false，密码：4E9750746AD03F82717EBD702C03C92749DE1CBC820798AB409FB5E67601AD，名字：null，姓氏：Smith，最后登录：null，电子邮件：tsmithrg@creativecommons.org，头像：空，性别：[男性]，收藏夹：{book isbn:空，颜色：3bff1e，药物：[黄松，美普罗贝特，GenRx每日防御抗真菌药]}，坐标：{lat:-16.00528，lng:-41.29722}， {id:990，用户名：sroserh，活动：false，密码：ab83a77062c8ee868f3b966d50a8ee39f63e3cec81349b83b81adcd3c6fa5da3，名字：Sarah，姓氏：null，姓氏：12/19/2015，电子邮件：sromerorh@about.me，头像：空，性别：[]，收藏夹：{book isbn:117541910-9，颜色：ac8603，药物：[桑树花粉，灌肠，Altipres-B]}，坐标：{lat:32.26616，lng:35.00893}， {id:991，用户名：sholmesri，活动：false，密码：11802fc53531079cdf8033e6772ffc5ac47c8ea8a453b66e8ac8df9ae29d9543，名字：Susan，姓氏：Holmes，姓氏：1/28/2016，电子邮件：sholmesri@mozilla.com，头像：https://robohash.org/doloreshicqui.png?size=50x50&set=set1，性别：[男，男]，收藏：{图书isbn:658583882-3，颜色：04da21，药品：[Tempra，雌二醇透皮系统]}，坐标：{lat:-39.23686，lng:-70.9197}， {id:992，用户名：rhayesrj，活动：true，密码：beae358b1eb873bac4fa640410520157f26738ee4d2de1144f3101c6af8e259，名字：Rachel，姓氏：Hayes，最后登录：12/7/2015，电子邮件：null，头像：https://robohash.org/teneturautest.jpg?size=50x50&set=set1，性别：[男性]，收藏：{图书isbn:291847889-X，颜色：空，药物：[布地奈德、盐酸阿霉素、酒石酸氢可待因和对乙酰氨基酚]}，坐标：{lat:-20.58333，lng:48.53333}， {id:993，用户名：jCampbellk，活动：false，密码：9602ccbe7599aefea9a25eb05ab2ede44302f57fd153bad07aa0f5a2f46be537，名字：Joan，姓氏：Campbell，姓氏：8/29/2016，电子邮件：jcampbellrk@bravesites.com，头像：https://robohash.org/numquamutquae.png?size=50x50&set=set1，性别：[男]，最爱：{图书isbn:588841638-X，颜色：7c5963，药品：[]}，坐标：{lat:57.6531，lng:14.6968}， {id:994，用户名：ejamesrl，活动：false，密码：55b1d2418621cda82225bf569f5f30c5b5fcfe5ae7aef6b1e3418a97335b47ab，名字：伊丽莎白，姓氏：詹姆斯，最后登录：2016年1月14日，电子邮件：ejamesrl@geocities.jp，头像：空，性别：[女性]，收藏夹：{book isbn:026417147-0，颜色：ba1d5c，药物：[氯沙坦钾和氢氯噻嗪，雷米普利]}，坐标：{lat:54.64043，lng:32.87811}， {id:995，用户名：krogersrm，活动：true，密码：c5a8921245a345fb133193f8ceb14021469b4f42a7d945e835b9497081fb7130，名字：Kathleen，姓氏：null，最后登录：2016年6月13日，电子邮件：khansenrm@nationalgeographic.com，头像：https://robohash.org/mollitiasuscipitmagnam.jpg?size=50x50&set=set1，性别：[男性]，收藏：{图书isbn:636138809-3，颜色：1c858e，药品：[盐酸曲马多，iBlanc Restora Bright]}，坐标：{lat:12.71402，lng:121.51242}， {id:996，用户名：sperkinsrn，活动：false，密码：c0f48289a4145ffd34374f7236ea4e650df57cff11f4f77b865a44dde410cfb8，名字：Sarah，姓氏：Perkins，姓氏：8/31/2016，电子邮件：null，头像：https://robohash.org/consequaturculpavelit.png?size=50x50&set=set1，性别：[男，男]，收藏夹：{book isbn:561211079-0，颜色：空，药物：[Caduet]}，坐标：{lat:43.30472，lng:124.32778}， {id:997，用户名：jlanero，活动：false，密码：043017FF30143B0F3727527F62346351582A396CC60A5BF599E674C c34c07c5，名字：杰克，姓氏：莱恩，最后登录：2016年3月20日，电子邮件：空，头像：空，性别：[]，收藏夹：{book isbn:819102101-3，颜色：空，药物：[利福平]}，坐标：{lat:51.8796，lng:4.5059}， {id:998，用户名：wroserp，活动：true，密码：626e6d1a1a92ff6e741ae21e3bbbae265000ca0f87306590c2344d4130dd57a9，名字：威利，姓氏：罗斯，最后登录：2016年10月16日，电子邮件：空，头像：空，性别：[男性]，收藏夹：{book isbn:108540866-3，颜色：空，药物：[氧气，加尼儿果仁去屑]，坐标：{lat:57.58167，lng:83.76917}，

---

{id:999，用户名：sphillipsrq，活动：false，密码：de0a87749bb04b2630ac6dbeb7259947383189afb6c2b458d80a15f6881b0439，名字：Stephanie，姓氏：Phillips，最后登录：11/24/2016，电子邮件：sphillipsrq@wikia.com，头像：https://robohash.org/laborerepellendustemporibus.jpg?size=50x50&set=set1，性别：[]，收藏：{图书isbn:721916787-3，颜色：9eee74，药品：[]}，坐标：{lat:51.0016，lng:21.71474}， {id:1000，用户名：phicksrr，活动：false，密码：2a27d007956e55da298aa3fb427a5a8ed7a8d661f4d4a2e340a98026996521eb，名字：Phyllis，姓氏：Hicks，姓氏：2/14/2016，电子邮件：null，头像：https://robohash.org/sedsednon.bmp?size=50x50&set=set1，性别：[女性，女性]，收藏夹：{book isbn:268196481-4，颜色：空，药物：[布洛芬]}，坐标：{lat:-6.22625，lng:106.0253}}]； var输出=； $.eachdata，functionkey，val{ ifval['active']==true { 输出+=； } }; 输出+=； $'list'.htmloutput； $document.on'click'，'.new_href'，functionevent{ 违约事件； var current_id=$this.attr'href'； var详细信息=； $.eachdata，functionkey，val{ ifval['active']==true&&val['id']==current\u id { 详细信息+=用户名：+val['username']+； 详细信息+=名字：+val['first_name']+； 详细信息+=姓氏：+val['last_name']+； 详细信息+=电子邮件：+val['email']+； 返回false； } }; 详情+=； $'info'.htmldetails； };

---

您可以添加示例JSON输出{id:999，用户名：sphillipsrq，活动：false，密码：de0a87749bb04b2630ac6dbeb7259947383189afb6c2b458d80a15f6881b0439，名字：Stephanie，姓氏：Phillips，姓氏：11/24/2016，电子邮件：sphillipsrq@wikia.com，阿凡达：{book isbn:721916787-3，颜色：9eee74，药物：[]}，坐标：{lat:51.0016，lng:21.71474}}，这就是你所需要的。我只需要一个用户，但json api本身包含将近100000个用户。你如何从列表中选择用户名？使用ID？@BongeLaBwana将其放入问题中，并具有可读的格式。你可以使用jsonlint.com来很好地格式化json。Hii bro你能将其放入JSFIDLE吗？在我的系统中，它显示onlylist对于活跃用户，其他什么都不管用。但是对于用户位置的虚拟形象和静态地图呢？当你点击该用户时，它应该返回一个包含用户信息的模式，例如用户名、姓氏、姓名、城市、描述和用户地图位置，当你点击列表中的用户名时，背景应该变为用户最喜欢的颜色？

{"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"}}]