I have a list of users displayed in my HTML page. I want when you click username in the list automatically it should change the background color to user favorite color.
so far this is what I have got !.
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>';
}
});
can anyone please provide a simple solution to accomplish this?
NOTE: each user has a key named favorites containing books or color
