Перебор массива объектов JSON
Добрый день
нужна помощь, так как я не по JS специалист, есть json строка типа [ { 'id':'1', 'name':'first', 'descr':'first object' }, {'id':'2', 'name':'second', 'descr':'second object' } ] как перебрать это все дело по id?, и потом я буду выводить это в определенные классы на странице спасибо |
Цитата:
|
вот что у меня получилось, и в консоли выводится каждый объект отдельно со всеми свойствами
вот скрин - http://prntscr.com/ezn8kr var urlProj = '/engine/scroll'; var getProjects = $.ajax({ url: urlProj, type: 'GET', dataType: 'json', success:function(data) { for (var i=0; i<=data.length-1; i++) { var project = data[i]; console.log(project); } } }); мне нужно значения ключей вывести с каждого объекта, тоесть к примеру у меня в html разметки 3 блока, и в каждый блок должен выводится объект, точнее значения объекта, но и соответсвенно сколько объектов столько и блоков будет на странице |
Sokoljr,
может ещё как-то обьясните, что вы хотите сделать...пока не понимаю |
у меня есть верстка
<div class="main__projects__project-wrap animated fadeInUp"> <div class="project-wrap__img"> <img src="/img/nophoto.png" alt="project"> </div> <div class="project-wrap__descr"> <div class="project-wrap__descr__date"></div> <div class="project-wrap__descr__title"></div> <div class="project-wrap__descr__descr"></div> <div class="project-wrap__descr__more"> <a href="#">read more</a> </div> </div> </div> <div class="main__projects__project-wrap left"> <div class="project-wrap__descr"> <div class="project-wrap__descr__date"></div> <div class="project-wrap__descr__title"></div> <div class="project-wrap__descr__descr"></div> <div class="project-wrap__descr__more"> <a href="#">read more</a> </div> </div> <div class="project-wrap__img"> <img src="/img/nophoto.png" alt="project"> </div> </div> мне нужно этот JSON вывести в мою верстку [{"id":"5","name":"First project", "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fringilla tempor sapien nonummy class vel? Dapibus sodales per ligula potenti.", "added_at":"2027-04-02", "image":"\/img\/projects\/1492888840project1.jpg"}, {"id":"6", "name":"Second project", "description":"Curabitur taciti potenti... Etiam platea nullam consequat torquent quisque? Facilisi ante metus dictum neque tristique parturient.", "added_at":"2004-07-06", "image":"\/img\/projects\/1492888928316564746.png"}] "name" в блок с классом <div class="project-wrap__descr__title"></div> "description" в блок с классом <div class="project-wrap__descr__descr"></div> "added_at" в блок с классом <div class="project-wrap__descr__date"></div> "image" в блок с классом <div class="project-wrap__img"> |
Sokoljr,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var data = [{ "id": "5", "name": "First project", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fringilla tempor sapien nonummy class vel? Dapibus sodales per ligula potenti.", "added_at": "2027-04-02", "image": "/img/projects/1492888840project1.jpg" }, { "id": "6", "name": "Second project", "description": "Curabitur taciti potenti... Etiam platea nullam consequat torquent quisque? Facilisi ante metus dictum neque tristique parturient.", "added_at": "2004-07-06", "image": "/img/projects/1492888928316564746.png" }]; function addInfo(data) { var block = $(".main__projects__project-wrap"), obj = { "name": ".project-wrap__descr__title", "description": ".project-wrap__descr__descr", "added_at": ".project-wrap__descr__date" }; data.forEach(function(el, i) { var parent = block[i]; Object.keys(obj).forEach(function(key) { $(obj[key], parent).html(el[key]) }); $(".project-wrap__img img", parent).attr({ src: el["image"] }) }) } addInfo(data) /*var urlProj = '/engine/scroll'; var getProjects = $.ajax({ url: urlProj, type: 'GET', dataType: 'json', success: addInfo });*/ }); </script> </head> <body> <div class="main__projects__project-wrap animated fadeInUp"> <div class="project-wrap__img"> <img src="/img/nophoto.png" alt="project"> </div> <div class="project-wrap__descr"> <div class="project-wrap__descr__date"></div> <div class="project-wrap__descr__title"></div> <div class="project-wrap__descr__descr"></div> <div class="project-wrap__descr__more"> <a href="#">read more</a> </div> </div> </div> <div class="main__projects__project-wrap left"> <div class="project-wrap__descr"> <div class="project-wrap__descr__date"></div> <div class="project-wrap__descr__title"></div> <div class="project-wrap__descr__descr"></div> <div class="project-wrap__descr__more"> <a href="#">read more</a> </div> </div> <div class="project-wrap__img"> <img src="/img/nophoto.png" alt="project"> </div> </div> </body> </html> |
ага, я понял
а как мне строку JSON добавить в переменную, она ведь у меня из вне идет? |
переделал чуть чуть, вроде бы получилось
var urlProj = '/engine/scroll'; var getProjects = $.ajax({ url: urlProj, type: 'GET', dataType: 'json', success: function(data) { var block = $(".main__projects__project-wrap"), obj = { "name": ".project-wrap__descr__title", "description": ".project-wrap__descr__descr", "added_at": ".project-wrap__descr__date" }; data.forEach(function(el, i) { var parent = block[i]; Object.keys(obj).forEach(function(key) { $(obj[key], parent).html(el[key]) }); $(".project-wrap__img img", parent).attr({ src: el["image"] }) }) } }); |
Спасибо!
|
Sokoljr,
:victory: |
Часовой пояс GMT +3, время: 14:42. |