Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.04.2017, 00:02
Аспирант
Отправить личное сообщение для Sokoljr Посмотреть профиль Найти все сообщения от Sokoljr
 
Регистрация: 27.06.2016
Сообщений: 68

Перебор массива объектов JSON
Добрый день
нужна помощь, так как я не по JS специалист, есть json строка типа

[
{
'id':'1',
'name':'first',
'descr':'first object'
},
{'id':'2',
'name':'second',
'descr':'second object'
}
]

как перебрать это все дело по id?, и потом я буду выводить это в определенные классы на странице

спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 23.04.2017, 00:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,181

Сообщение от Sokoljr
как перебрать это все дело по id?
???
Ответить с цитированием
  #3 (permalink)  
Старый 23.04.2017, 00:20
Аспирант
Отправить личное сообщение для Sokoljr Посмотреть профиль Найти все сообщения от Sokoljr
 
Регистрация: 27.06.2016
Сообщений: 68

вот что у меня получилось, и в консоли выводится каждый объект отдельно со всеми свойствами

вот скрин - 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 блока, и в каждый блок должен выводится объект, точнее значения объекта, но и соответсвенно сколько объектов столько и блоков будет на странице
Ответить с цитированием
  #4 (permalink)  
Старый 23.04.2017, 00:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,181

Sokoljr,
может ещё как-то обьясните, что вы хотите сделать...пока не понимаю
Ответить с цитированием
  #5 (permalink)  
Старый 23.04.2017, 00:51
Аспирант
Отправить личное сообщение для Sokoljr Посмотреть профиль Найти все сообщения от Sokoljr
 
Регистрация: 27.06.2016
Сообщений: 68

у меня есть верстка

<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">
Ответить с цитированием
  #6 (permalink)  
Старый 23.04.2017, 01:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,181

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>
Ответить с цитированием
  #7 (permalink)  
Старый 23.04.2017, 01:31
Аспирант
Отправить личное сообщение для Sokoljr Посмотреть профиль Найти все сообщения от Sokoljr
 
Регистрация: 27.06.2016
Сообщений: 68

ага, я понял

а как мне строку JSON добавить в переменную, она ведь у меня из вне идет?
Ответить с цитированием
  #8 (permalink)  
Старый 23.04.2017, 01:40
Аспирант
Отправить личное сообщение для Sokoljr Посмотреть профиль Найти все сообщения от Sokoljr
 
Регистрация: 27.06.2016
Сообщений: 68

переделал чуть чуть, вроде бы получилось

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"]
	            })
	        })
  		}
	});
Ответить с цитированием
  #9 (permalink)  
Старый 23.04.2017, 02:09
Аспирант
Отправить личное сообщение для Sokoljr Посмотреть профиль Найти все сообщения от Sokoljr
 
Регистрация: 27.06.2016
Сообщений: 68

Спасибо!
Ответить с цитированием
  #10 (permalink)  
Старый 23.04.2017, 02:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,181

Sokoljr,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вывод данных из массива JSON Vincent Vega jQuery 19 04.03.2016 12:44
Конструктор массива объектов и работа с ними через localStorage pepel266 Общие вопросы Javascript 16 04.11.2015 17:30
Вызов свойств объектов из массива или объекта с параметрами Sanu0074 jQuery 4 22.05.2015 10:18
Как достать данные из JSON массива? Dimaz jQuery 15 27.11.2012 19:58
Перебор массива объектов Триви jQuery 12 26.08.2011 08:22