Перебор массива объектов 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: |
рони,
Подскажите еще пожалуйста, если к примеру у меня будет 20 таких объектов, а выводить я хочу всего 3 на странице, только рандомно, где можно почитать или что применить к такому варианту? |
Цитата:
искать js array shuffle по выборке читать Math.random и array.splice |
рони,
Да в data Спасибо |
Sokoljr,
var block = $(".main__projects__project-wrap"), этих блоков всего 3? |
| Часовой пояс GMT +3, время: 02:29. |