@Xveeder

Как при помощи ajax подгружать данные из многомерных массивов?

Здравствуйте. Проблема в следующем. Имеется сложный многомерный массив, который скармливается через ajax, но вот вопрос, как разобрать массив с допустим такой структурой:

[2] => Array
        (
            [id] => 164189
            [from_id] => -47696395
            [date] => 1512076454
            [rdate] => 01.12.2017
            [post_type] => post
            [text] => Только что мы все-таки сделали 80 миллионов!<br><br>В последние часы месяца в самый последний день. <br><br>Не буду много писать. Преданные читатели моего блога и те, кто знают, о чем идет речь могут нас поздравить. <br><br>Сам же хочу поблагодарить всю команду, особенно тех, кто до последнего сражался сегодня за Цель! Это было очень мощно. Команда, как будто бежала эстафету, закрывая планы каждого отдела и передавая эстафетную палочку дальше следующему отделу! Это было мощное сражение! <br><br>Для тех, кто не в курсе о чем речь, читайте вот этот пост: https://vk.com/wall-47696395_138687<br><br>Мы должны были сделать ее еще раньше за 2 месяца (август и сентябрь). Но не справились. Разумеется, если гора не была взята с первого раза, мы отряхнулись собрались с силами и снова начали брать эту Цель. И сделали! <br><br>Итак, за 2 месяца (октябрь + ноябрь), выручка одной компании, "Лайк Центр" превысила 80 млн рублей. Чтобы вы понимали, мы в год столько не делали ни в 2016, ни в 2015. А тут за 2 месяца. Причем, результат довольно твердый, в октябре было сделано 40 млн с небольшим и ноябрь только что закрыли 40 млн +. По сравнению с прошлым годом мы выросли почти в 10 раз. <br><br>Очень благодарю каждого, кто сражался за эту Цель. <br><br>И еще раз сделаю акцент на важном: мы ставили себе цель сделать 80 млн за 2 месяца август+сентябрь, но не смогли сделать это с 1 раза, в первый раз мы облажались. Но не остановились. И поставили такую же цель на октябрь + ноябрь. Сделали. Я это к чему: Не важно, что происходит - просто продолжай движение! <br><br>Читайте летний пост о том, как начиналась эта цель: https://vk.com/wall-47696395_138687<br><br>p.s. Вообще, это мало о чем говорит, но для тех, кто следит за историей развития нашей компании, этот пост - большая победа! Благодарю за поддержку! <br><br>И еще раз! Выражаю бесконечную благодарность за работу всей нашей команде. Такой слаженной работы я не видел никогда в жизни, ни в одной компании, мы какие-то все молодцы собрались. Работали как единый организм. Очень круто и ответственно! <br><br>80 миллионов за 2 месяца! Это пипец ведь как много только на одном Московском офисе и это доходы только 1 компании, без учета продаж наших франчайзи-партнеров. <br><br>Операционную прибыль за ноябрь пока не свели. Будет после 10 числа. А вот За октябрь при выручке в 40,5 млн, операционная прибыль составила почти 15,5 млн рублей. <br><br>Вторая космическая. <br><br>p.p.s. Благодарю инвесторов за доверие! Они вложились в нашу компанию, когда она была еще совсем мелкой и помогли нам развиться после кризиса. И, как вижу, не прогадали) <br><br>p.p.p.s Инвестируйте в лайк :) Я серьезно, читайте, как это сделать, пройдя по этой ссылке: https://vk.com/wall-47696395_133309<br><br>#money@ayazshabutdinov
            [likes] => 1191
            [comments] => 97
            [reposts] => 37
            [views] => 
            [image] => Array
                (
                    [0] => https://pp.userapi.com/c841438/v841438962/3f3e7/92aqjDRLMz4.jpg
                )

            [song] => Array
                (
                    [1] => Array
                        (
                            [name] => Estray  -  LIVE @ Bulbo Showcase #05 - Punta Hermosa, Peru - 04.03.2017
                            [id] => 456241039
                        )

                )

        )


И затем умудриться загрузить разобранные данные вот в такой html-код:

<div class="single">

       <div class="image">
           <div class="postimage"><img src="" alt="">тут изображения из массива</div>
           <div class="postimage"><img src="" alt="">тут изображения из массива</div>
           <div class="postimage"><img src="" alt="">тут изображения из массива</div>
           <div class="postimage"><img src="" alt="">тут изображения из массива</div>
           <div class="postimage"><img src="" alt="">тут изображения из массива</div>
           <div class="postimage"><img src="" alt="">тут изображения из массива</div>
           <div class="postimage"><img src="" alt="">тут изображения из массива</div>
           <div class="postimage"><img src="" alt="">тут изображения из массива</div>
       </div>
       <div class="text">Тут некий текст</div>
       <div class="doc">
           <div class="song">
               <div class="numsong"></div>
               <div class="namesong"></div>
           </div>
           <div class="song">
               <div class="numsong"></div>
               <div class="namesong"></div>
           </div>
           <div class="song">
               <div class="numsong"></div>
               <div class="namesong"></div>
           </div>
           <div class="song">
               <div class="numsong"></div>
               <div class="namesong"></div>
           </div>
       </div>
  
   </div>


Почему-то у меня, в цикле each не получается заменять содержимое сразу 2-х разных дивов одного уровня, например:

<div class="single">
       <div class="image">
           <div class="postimage"><img src="" alt="">ЗАПИСАТЬ СЮДА</div>
       </div>
</div>
   <div class="numlikes">
       <p>И СЮДА</p>
   </div>


Если я вставляю 2 конструкции с функцией append в один цикл, скрипт вообще перестаёт работать.

Спасибо.
  • Вопрос задан
  • 224 просмотра
Пригласить эксперта
Ответы на вопрос 2
@AnneSmith
самая ленивая
проще всего было бы сначала сделать нужную структуру интерфейса и прописать всем элементам уникальные id, а потом по этим id скомпоновать данные в json
затем один цикл делает за вас всю работу поиска значений по id в json и вставляет их в тэг с таким же id

если вам лень приводить данные в удобный формат, придется возиться с классами в тэгах, как вы собственно и начали делать

UPD: кстати есть еще такой замечательный плагин datatables - творит чудеса, api простой, хорошо кушает json
Ответ написан
Ну примерно так
var TemplateRow = (function() {
	var $container;
	var $containerImages;
	var $containerSongs;
	var $containerText;

	this.create = function() {
		$container = $("<div/>").addClass("single");
		$containerText = $("<div/>").addClass("text");
		$containerImages = $("<div/>").addClass("image");
		$containerSongs = $("<div/>").addClass("doc");

		$container.append($containerImages)
			.append($containerText)
			.append($containerSongs);

		return this;
	};

	this.setTextAsHtml = function(value) {
		$containerText.html(value);
		return this;
	};

	this.addImage = function(url, title, alt) {
		var $block = $("<div/>").addClass("postimage");
		var $image = $("<img/>")
			.attr("src", url)
			.attr("title", title)
			.attr("alt", alt);

		$block.html($image);
		$containerImages.append($block);
		return this;
	};

	this.addSong = function(id, name) {
		var $block = $("<div/>").addClass("song");
		var $blockId = $("<div/>").addClass("numsong").text(id);
		var $blockName = $("<div/>").addClass("namesong").text(name);

		$block.append($blockId).append($blockName);
		$containerSongs.append($block);
		return this;
	};

	this.getContainer = function() {
		return $container;
	};

	return this;
});

$.each(data, function(index, element) {
	var container = new TemplateRow;
	container.create().setTextAsHtml(element.text);

	$.each(element.image, function(imageIndex, imageUrl) {
		container.addImage(imageUrl, "", "");
	});

	$.each(element.song, function(songIndex, song) {
		container.addSong(song.id, song.name);
	});

	container.getContainer().appendTo("#articles #innerarticles");
});


Первую часть вопроса удалось понять по комментам, вторую не допер
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы