Форум

Sokoljr · #1 (**permalink**) 23.04.2017, 00:02

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

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

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

спасибо

рони · #2 (**permalink**) 23.04.2017, 00:10

Сообщение от Sokoljr

как перебрать это все дело по id?

???

Sokoljr · #3 (**permalink**) 23.04.2017, 00:20

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

вот скрин - 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

Sokoljr,
может ещё как-то обьясните, что вы хотите сделать...пока не понимаю

Sokoljr · #5 (**permalink**) 23.04.2017, 00:51

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

<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

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>

Sokoljr · #7 (**permalink**) 23.04.2017, 01:31

ага, я понял

а как мне строку JSON добавить в переменную, она ведь у меня из вне идет?

Sokoljr · #8 (**permalink**) 23.04.2017, 01:40

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

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 · #9 (**permalink**) 23.04.2017, 02:09

Спасибо!

рони · #10 (**permalink**) 23.04.2017, 02:13

Sokoljr,

Форум

Справочник

Discord чат

Курсы javascript