Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Перебор двухмерного массива (https://javascript.ru/forum/misc/34017-perebor-dvukhmernogo-massiva.html)

vladimirlip 18.12.2012 08:53

Перебор двухмерного массива
 
Здравствуйте!
Есть задача: при помощи ajax получать записи из бд Mysql. Сайт работает на codeigniter.
$('#TestPrivet1').click(function(){
        var param = $('#pole1').val();
         $.ajax({
 		type: 'POST',
 		url: 'http://masterstvo-zhizni.loc/index.php/seminars/showAjax',
        data: {'param':param},
        cache: false,
 		dataType: 'json',
 		success: function(data) {
            $('#result1').html('<table class="raspisanie_sem"><tr class="one"><td>Дата проведения</td><td>Город</td><td>Организатор</td><td>Тема</td></table>');
           	for ( var key1 in data['dataAjax'] ) {   
           	                                        
           	    for ( var key2 in data['dataAjax'][key1] ) {  
           	                                                        
           	        $('#result1').append('<tr class="tbody"><td>' + data['dataAjax'][key1]['date']+ '</td><td>'+ data['dataAjax'][key1]['gorod']+'</td><td class="cursiv">'+ data['dataAjax'][key1]['fio']+ data['dataAjax'][key1]['telefon']+data['dataAjax'][key1]['email']+'</td><td class="bold_td">'+data['dataAjax'][key1]['zagolovok']+'</td></tr>');
           	       }
           	    }
 		}
 	});//конец ajax
  });//конец клик
});//конец ready

Контроллер:
public function showAjax(){
            $param = $this->input->post('param');
            $data = array();
            $data['dataAjax'] = $this->raspisanie_model->get_one($param);
             // Возвращаем ответ
            echo json_encode($data);
 
    }


Запрос к базе:
public function get_one($seminar_id) {
            $this->db->select(' raspisanie.date
                                 , organizator.gorod
                                 , organizator.fio
                                 , organizator.email
                                 , organizator.telefon
                                 , seminars.zagolovok');
            $this->db->from('raspisanie');
            $this->db->join('seminars', 'raspisanie.seminar_id = seminars.seminar_id'); 
            $this->db->join('organizator', 'raspisanie.organizator_id = organizator.organizator_id');
            $this->db->where('raspisanie.seminar_id',$seminar_id);
            $query = $this->db->get();
            return $query->result_array();
                }

Проблема в следующем:
данные вставляются, но почему то приходит три строки. А при переборе массива каждая строка выводится на сайте по 6 раз.т.е. вместо 3-х нужных, получаю 18 строк в таблице на сайте.

firebug:
dataAjax


[Object { date="7-8-9 декабря 2012г.", gorod="Рязань", fio="Елена ", ещё...},
Object { date="14-15-16 декабря", gorod="Воронеж", fio="Фарида и Александр"
, ещё...},
Object { date="2-3 февраля", gorod="Одесса", fio="Татьяна "
, ещё...}]


0 Object { date="7-8-9 декабря 2012г.", gorod="Рязань", fio="Елена "
, ещё...}

1 Object { date="14-15-16 декабря", gorod="Воронеж", fio="Фарида и Александр", ещё...}

2 Object { date="2-3 февраля", gorod="Одесса", fio="Татьяна "
, ещё...}

bushstas 18.12.2012 09:17

у тебя явно косяк внутри двух циклов где формируется HTML полученных данных, думаю ряды <tr> нужно формировать в первом цикле ( вне второго короче) а уже столбцы <td> добавлять внутри второго цикла,
в общем у тебя логическая ошибка тут

что-то вроде того

success: function(data) {
            $('#result1').html('<table class="raspisanie_sem"><tr class="one"><td>Дата проведения</td><td>Город</td><td>Организатор</td><td>Тема</td></table>');
           	
			var html=''
			
			for ( var key1 in data['dataAjax'] ) {   
           	      html+='<tr class="tbody">'                                  
           	    for ( var key2 in data['dataAjax'][key1] ) {  
           	                                                        
           	        html+='<td>'+data['dataAjax'][key1][key2]+'</td>'
           	       }
           	    
				  html+='</tr>'
				}
 		$('#result1').append(html)
		}
// отпишись как помозгуешь

vladimirlip 18.12.2012 09:33

Спасибо тебе огромное! щас выводит правильно. Только три строки. Но, в разных ячейках

vladimirlip 18.12.2012 09:58

Есть ещё вопрос:
Щас он выводит каждый элемент в отдельную ячейку, т.е получается 6-ть ячеек, а в шапке 4-ре

А мне нужно:
первый элемент: data['dataAjax'][key1]['date'] в отдельной ячейке
второй элемент: data['dataAjax'][key1]['gorod'] в отдельной ячейке
третий и четвертый и пятый вывести в одной ячейке:
data['dataAjax'][key1]['fio'];
data['dataAjax'][key1]['telefon'];
data['dataAjax'][key1]['email']

шестой data['dataAjax'][key1]['zagolovok'] в отдельной ячейке

function(data) {
	            $('#result1').html('<table class="raspisanie_sem"><tr class="one"><td>Дата проведения</td><td>Город</td><td>Организатор</td><td>Тема</td></table>');
	             
	            var html=''
	             
	            for ( var key1 in data['dataAjax'] ) {  
	                  html+='<tr class="tbody">'                                 
	                for ( var key2 in data['dataAjax'][key1] ) { 
	                                                                     
	                    html+='<td>'+data['dataAjax'][key1]['date']+'</td>'+'<td>'+data['dataAjax'][key1]['gorod']+'</td>'+'<td>'+data['dataAjax'][key1]['fio']+data['dataAjax'][key1]['telefon']+data['dataAjax'][key1]['email']+'</td>'+'<td>'+data['dataAjax'][key1]['zagolovok']+'</td>';
	                   }
	                 
	                  html+='</tr>'
	                }
	        $('#result1').append(html)
	        }

Щас выводит три строки, но теперь повторяет столбцы. Т.е первый проход цикла 4-ре столбца , потом опять 4-ре столбца и т.д.

bushstas 18.12.2012 10:55

success: function(data) {
            $('#result1').html('<table class="raspisanie_sem"><tr class="one"><td>Дата проведения</td><td>Город</td><td>Организатор</td><td>Тема</td></table>');
           	
			var html='',count
			
			for ( var key1 in data['dataAjax'] ) {  count=0
           	      html+='<tr class="tbody">'                                  
           	    for (var key2 in data['dataAjax'][key1] ) {count++  
           	       if (count<4||count==6){html+='<td>'}                                               
           	       html+=data['dataAjax'][key1][key2]
           	       if (count<3||count>4){html+='</td>'}                                               
				   }
           	    
				  html+='</tr>'
				}
 		$('#result1').append(html)
		}
// что-то вроде того проверь там

vladimirlip 18.12.2012 11:01

Изящно, Зачёт! Сработало. Вывел три строки в каждой по 4-ре ячейки

Navka1 21.10.2016 14:28

Здравствуйте! Понимаю, что теме уже >4 лет, но столкнулась с абсолютно идентичной проблемой, так что даже зарегистрировалась на форуме и вышла из режима readonly :D

success: function (data) 
			{
				list = JSON.parse(data);	
				var html = "";
				for (var key1 in list['list'])
				{	
					 html+='<a class = "link" onclick="event.preventDefault()">';       
					for (var key2 in list['list'][key1]) {
						//i++;
						//	console.log(i);
						html +='<li class = "big" onclick="findList(' + (+key1 + 1) + ')">' + list['list'][key1]["ima"] + "&nbsp\(" + list['list'][key1]["count(marker.district)"] + "\)</li>";					
						//console.log(list['list'][key1]["ima"]);
					}
					html+='</a>';
				};		
				html+='<a class = "link" onclick="event.preventDefault()"><li class = "big" onclick="findList('+list.allLIST['count(*)']+")>Все районы"  + "&nbsp\(" + list.allLIST['count(*)'] + "\)</li></a>";
				console.log(html);
				$("ul.list").html(html);
			}

Прочитав ответ от bushstas, выполнила его совет. В итоге все равно выводит по три строки в один <li>. А list.allLIST['count(*)'] вообще выдает undefined. Помогите пожалуйста, кто сможет. Уже три дня бьюсь головой о клаву...
Заранее спасибо!

ksa 21.10.2016 14:56

Цитата:

Сообщение от Navka1
Помогите пожалуйста, кто сможет.

Какова суть задачи? Что "дано"? Что нужно "получить" в итоге?

Navka1 21.10.2016 14:58

Цитата:

Сообщение от ksa (Сообщение 432480)
Какова суть задачи? Что "дано"? Что нужно "получить" в итоге?

Все "входные данные" абсолютно совпадают с проблемой, описанной в начале топика. При проходе по циклу в <а> добавляется сразу три <li>, как и у автора темы. Изменила код на тот, который любезно предоставил bushstas, проблема осталась... Чувствую, что дело именно в цикле.

Запросы к базе и тд. не предоставила, потому как объект (массив) практически идентичен с объектом автора темы.

ksa 21.10.2016 15:10

Navka1, начнем с того, что в тег <a> не стоит "вставлять" теги <li>...

Для анализа циклов бывает достаточно просто выводить то, с чем имеешь дело в самом цикле. Обычно это многое проясняет... ;)

Navka1 21.10.2016 15:12

Цитата:

Сообщение от ksa (Сообщение 432484)
Navka1, начнем с того, что в тег <a> не стоит "вставлять" теги <li>...

Для анализа циклов бывает достаточно просто выводить то, с чем имеешь дело в самом цикле. Обычно это многое проясняет... ;)

Спасибо за ответы!:)
О теге <a> учту, но console.log(list['list'][key1]["ima"]) показывает так же 3 строки...

ksa 21.10.2016 15:19

Цитата:

Сообщение от Navka1
но console.log(list['list'][key1]["ima"]) показывает так же 3 строки...

И что с того? :blink:
Цикл-то у тебя идет не по
list['list'][key1]["ima"]

а по
Цитата:

Сообщение от Navka1
for (var key2 in list['list'][key1]) {...}

Т.е. по
list['list'][key1][key2]

Navka1 21.10.2016 15:22

Цитата:

Сообщение от ksa (Сообщение 432489)
И что с того? :blink:
Цикл-то у тебя идет не по
list['list'][key1]["ima"]

а по

Т.е. по
list['list'][key1][key2]

Как я понимаю, необходимо сделать еще один вложенный цикл, уже по ключу list['list']["ima"][key3]?

ksa 21.10.2016 15:24

Цитата:

Сообщение от Navka1
Как я понимаю, необходимо сделать еще один вложенный цикл, уже по ключу list['list']["ima"][key3]?

Может и так... Я просто пока не понял нужные ТСу и тебе подробности...

Т.к. лучший вариант это сделать тестовый пример на котором можно что-то показать...
А у вас просто куски какого-то не работающего кода.

ksa 21.10.2016 15:25

Цитата:

Сообщение от Navka1
Как я понимаю, необходимо сделать еще один вложенный цикл, уже по ключу list['list']["ima"][key3]?

Только тогда не понятно зачем вам там цикл по key2... :blink:

Navka1 21.10.2016 15:28

Есть запрос к БД:

$qr_result = mysql_query("select ket.district.id, ket.district.ima, count(marker.district) from district
							left join ket.marker on ket.marker.district = ket.district.ima  
							group by district ORDER BY id;");
$qr_result2 = mysql_query("SELECT count(*) FROM `marker`;")
or die(mysql_error());

$list = array();
//$alllist = array();
while($r = mysql_fetch_assoc($qr_result)) 
{
	$list['list'][] = $r; 

};
while($d = mysql_fetch_assoc($qr_result2)) 
{
	$list['allLIST'][] = $d;		
};
echo json_encode($list); 
//echo json_encode($alllist); 
?>


Ответ приходит в следующем виде:
{"list":[{"id":"1","ima":"...","count(marker.district)":"1" },
..........,
"allLIST":[{"count(*)":"6"}]}

В аяксе хочу выводить только значения ima и count(marker.district), но выводится все это добро сразу три раза...
При этом, при выводе ключа "allLIST":[{"count(*)":"6"}]} - все происходит нормально в этом куске кода:
for (var key1 in list['allLIST'])
				{	
					html+='<a class = "link" onclick="event.preventDefault()">';     
					for (var key2 in list['allLIST'][key1]) {
						html+='<li class = "big" onclick="alldistrict()")>Все районы &nbsp\(' + list['allLIST'][key1]['count(*)'] + "\)</li>";				
					}
					html+='</a>';
				}
					console.log(html);
				$("ul.list").html(html);

Собственно, вопрос в том, как пофиксить дублирование строк при выводе их из ассоциативного массива в цикле:)
Пардон, скорее из объекта, а не массива

ksa 21.10.2016 15:28

Зачем этот цикл?
Цитата:

Сообщение от Navka1 (Сообщение 432476)
for (var key2 in list['list'][key1]) {
						//i++;
						//	console.log(i);
						html +='<li class = "big" onclick="findList(' + (+key1 + 1) + ')">' + list['list'][key1]["ima"] + "&nbsp\(" + list['list'][key1]["count(marker.district)"] + "\)</li>";					
						//console.log(list['list'][key1]["ima"]);
					}

Ведь далее про key2 вообще нет ни слова... :blink:

ksa 21.10.2016 15:32

Начнем учить тебя как делать тестовый пример...
Цитата:

Сообщение от Navka1
Есть запрос к БД:

Это тут не интересно...
Цитата:

Сообщение от Navka1
Ответ приходит в следующем виде:
{"list":[{"id":"1","ima":"...","count(marker.district)": "1" },
..........,
"allLIST":[{"count(*)":"6"}]}

А вот ответ нужно сделать более полным. :nono:
Т.е. привести 3-4 полновесных элемента (а у тебя один) для демонстрации

Ну и потом показать пример хтмля, который хочешь получить на этих данных.

Все!
Тестовый пример готов. С ним можно будет работать. ;)

Navka1 21.10.2016 15:39

Цитата:

Сообщение от ksa (Сообщение 432499)
Т.е. привести 3-4 полновесных элемента (а у тебя один) для демонстрации

Ну и потом показать пример хтмля, который хочешь получить на этих данных.

Все!
Тестовый пример готов. С ним можно будет работать. ;)

Слушаюсь, сэр!
Примеры 3-х элементов в list+allLIST:
{"list":[{"id":"1","ima":"\u0421\u0432\u044f\u0442\u043e\u0 448\u0438\u043d\u0441\u043a\u0438\u0439","count(ma rker.district)":"1"},
{"id":"2","ima":"\u0413\u043e\u043b\u043e\u0441\u0 435\u0435\u0432\u0441\u043a\u0438\u0439","count(ma rker.district)":"1"},
{"id":"3","ima":"\u0414\u0430\u0440\u043d\u0438\u0 446\u043a\u0438\u0439","count(marker.district)":"0 "},
..........
"allLIST":[{"count(*)":"6"}]}

Желаемый html-код:

<li class = "big" onclick="findList(1)">Святошинский&nbsp(0)</li>


Тобишь:

'<li class = "big" onclick="findList(' +КЛЮЧ  id +  ')">' + КЛЮЧ ima + "&nbsp\(" + КЛЮЧ count(marker.district) + '\)</li>'

ksa 21.10.2016 15:54

Цитата:

Сообщение от Navka1
Примеры 3-х элементов в list+allLIST:
{"list":[{"id":"1","ima":"\u0421\u0432\u044f\u0442\u043e \u0 448\u0438\u043d\u0441\u043a\u0438\u0439","count(ma rker.district)":"1"},
{"id":"2","ima":"\u0413\u043e\u043b\u043e\u0441 \u0 435\u0435\u0432\u0441\u043a\u0438\u0439","count(ma rker.district)":"1"},
{"id":"3","ima":"\u0414\u0430\u0440\u043d\u0438 \u0 446\u043a\u0438\u0439","count(marker.district)":"0 "},
..........
"allLIST":[{"count(*)":"6"}]}

Тут на форуме есть возможность форматировать код... :-/
А мне пришлось твою писанину еще и подправлять.

Вот такой вариант получился.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
var obj={
	"list":[
		{
			"id":"1",
			"ima":"\u0421\u0432\u044f\u0442\u043e\u0448\u0438\u043d\u0441\u043a\u0438\u0439",
			"count(marker.district)":"1"
		},
		{
			"id":"2",
			"ima":"\u0413\u043e\u043b\u043e\u0441\u0435\u0435\u0432\u0441\u043a\u0438\u0439",
			"count(marker.district)":"1"
		},
		{
			"id":"3",
			"ima":"\u0414\u0430\u0440\u043d\u0438\u0446\u043a\u0438\u0439",
			"count(marker.district)":"0 "
		}
	],
	"allLIST":[
		{"count(*)":"6"}
	]
};

$(function(){
	var o=$('#test')
	for (var i=0; i<obj.list.length; i++) {
		var str='<li class = "big" onclick="alert(' + (i + 1) + ')">';
		str=str + obj.list[i].ima + '&nbsp;(' + obj.list[i]['count(marker.district)'];
		str=str + ')</li>';
		o.append(str);
	};
});
</script>
</head>
<body>
<ul id='test'></ul>
</body>
</html>

Вот это и называется тестовым примером. :write:

Navka1 21.10.2016 16:03

Цитата:

Сообщение от ksa (Сообщение 432504)
Тут на форуме есть возможность форматировать код... :-/
А мне пришлось твою писанину еще и подправлять.

Каюсь, учту на будущее, простите пожалуйста :agree:

Сейчас протестирую на своем примере и отпишусь:)
Спасибо большое, что помогаете на этом форуме и мне, и остальным таким же... недалеким:)

Navka1 21.10.2016 16:09

Цитата:

Сообщение от ksa (Сообщение 432504)
o.append(str);

Подскажите пожалуйста, за что отвечает данная строка?

А, поняла. Добавление в #test

Navka1 21.10.2016 16:15

var list = function (){
		$.ajax({
			type: "POST",
			url: "../php/list.php",			
			success: function (data) 
			{
				var obj = JSON.parse(data);	
				var str = "";
				for (var i=0; i<obj.list.length; i++) {
						var str='<li class = "big" onclick="findList(' + obj.list[i]['id'] + ')">';
						str=str + obj.list[i].ima + '&nbsp;(' + obj.list[i]['count(marker.district)'];
						str=str + ')</li>';						
				}					
				$("ul.list").html(str);			
			}
		})
	}
	list();
	
}


При вот таком измененном коде выводит теперь только последнюю запись из объекта...

Navka1 21.10.2016 16:18

Нашла ошибку вот в этом кусочке кода...
Цитата:

Сообщение от Navka1 (Сообщение 432510)
var str+='<li class = "big" onclick="findList(' + obj.list[i]['id'] + ')">';

Теперь все работает как часики!!! :dance:
Просто нереально огромное Вам спасибо! Возможно, обращусь еще, но надеюсь, что потребности в этом не возникнет:)

ksa 21.10.2016 16:21

Цитата:

Сообщение от Navka1
При вот таком измененном коде выводит теперь только последнюю запись из объекта...

Потому как у тебя нет вставки каждого элемента...

Ты просто записываешь переменную str один раз
Цитата:

Сообщение от Navka1
$("ul.list").html(str);

А оно-то как раз и равна последнему элементу из массива... ;)

ksa 21.10.2016 16:22

Цитата:

Сообщение от Navka1
Спасибо большое, что помогаете на этом форуме и мне, и остальным таким же... недалеким

А вот некоторые мне еще и карму минусуют... :D

Navka1 21.10.2016 16:27

Цитата:

Сообщение от ksa (Сообщение 432514)
А вот некоторые мне еще и карму минусуют... :D

Я Вам ее "заплюсовала" еще до того, как Вы помогли:)
Некоторые просто не умеют воспринимать критику адекватно. А ведь если просишь помощи - проси смиренно:)

ksa 24.10.2016 08:32

Цитата:

Сообщение от Navka1
А ведь если просишь помощи - проси смиренно

Дело не в смирении... :no:
Дело в том, что нужно научиться помогать себе самостоятельно. ;)


Часовой пояс GMT +3, время: 03:18.