Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как из массива сделать список ul>li (https://javascript.ru/forum/misc/57287-kak-iz-massiva-sdelat-spisok-ul-li.html)

malefikus13 28.07.2015 11:32
Как из массива сделать список ul>li
 
Доброго времени уважаемые форумчане. Подскажите пожалуйста, как можно вывести имеющийся массив в список?

Вот массив:

var link_massiv = {"fl_FIO_soc_google": "websearch_queries1",
				   "fl_FIO_google": "websearch_queries2", 
				   "fl_IF_soc_google": "websearch_queries3", 
				   "fl_IF_google": "websearch_queries4", 
				   "fl_FIO_soc_ya": "websearch_queries5", 
				   "fl_FIO_ya": "websearch_queries6", 
				   "fl_IF_soc_ya": "websearch_queries7", 
				   "fl_IF_ya": "websearch_queries8", 
				   "email1": "websearch_queries9", 
				   "email2": "websearch_queries10", 
				   "tl": "websearch_queries11", 
				   "tl_soc": "websearch_queries12", 
				   "tl_ya": "websearch_queries13", 
				   "tl_ya_soc": "websearch_queries14"};


Нужно получить примерно такой список, где ключ - это ссылка, а значение является обычным текстом:

<ul>
    <li>
        <a href="websearch_queries1">fl_FIO_soc_google</a>
    </li>
</ul>


Заранее спасибо!

ksa 28.07.2015 11:56
Цитата:
Сообщение от malefikus13
как можно вывести имеющийся массив
Не хотел тебя расстраивать... Но это не массив. :no: Это объект.

Создай элемент UL...
Для прохода по объекту воспользуйся
http://javascript.ru/for..in
Далее создавай элемент LI, меняй его атрибут href и innerHTML...
Добавляй его в UL...
По окончании цикла вставь тот UL d нужное тебе место...

karssen 28.07.2015 13:02
У меня так сработало:
$(document).ready(function(){
var link_massiv = {"fl_FIO_soc_google": "websearch_queries1",
                   "fl_FIO_google": "websearch_queries2",
                   "fl_IF_soc_google": "websearch_queries3",
                   "fl_IF_google": "websearch_queries4",
                   "fl_FIO_soc_ya": "websearch_queries5",
                   "fl_FIO_ya": "websearch_queries6",
                   "fl_IF_soc_ya": "websearch_queries7",
                   "fl_IF_ya": "websearch_queries8",
                   "email1": "websearch_queries9",
                   "email2": "websearch_queries10",
                   "tl": "websearch_queries11",
                   "tl_soc": "websearch_queries12",
                   "tl_ya": "websearch_queries13",
                   "tl_ya_soc": "websearch_queries14"};
				  
var ul = document.createElement('ul');
	for (elem in link_massiv){
		var li = document.createElement('li');
		var a = document.createElement('a');
		$(a).appendTo(li);
		$(a).attr('href',link_massiv[elem]);
		$(a).text(elem);
		$(li).appendTo(ul);
	}
$(ul).appendTo('body');
});

malefikus13 28.07.2015 14:08
Цитата:
Сообщение от karssen (Сообщение 381911)
У меня так сработало:
$(document).ready(function(){
var link_massiv = {"fl_FIO_soc_google": "websearch_queries1",
                   "fl_FIO_google": "websearch_queries2",
                   "fl_IF_soc_google": "websearch_queries3",
                   "fl_IF_google": "websearch_queries4",
                   "fl_FIO_soc_ya": "websearch_queries5",
                   "fl_FIO_ya": "websearch_queries6",
                   "fl_IF_soc_ya": "websearch_queries7",
                   "fl_IF_ya": "websearch_queries8",
                   "email1": "websearch_queries9",
                   "email2": "websearch_queries10",
                   "tl": "websearch_queries11",
                   "tl_soc": "websearch_queries12",
                   "tl_ya": "websearch_queries13",
                   "tl_ya_soc": "websearch_queries14"};
				  
var ul = document.createElement('ul');
	for (elem in link_massiv){
		var li = document.createElement('li');
		var a = document.createElement('a');
		$(a).appendTo(li);
		$(a).attr('href',link_massiv[elem]);
		$(a).text(elem);
		$(li).appendTo(ul);
	}
$(ul).appendTo('body');
});
спасибо большое! Сейчас попробую))

Endy 28.07.2015 14:36 
<body>
    <script>
        var link_massiv = {
    "fl_FIO_soc_google": "websearch_queries1",
        "fl_FIO_google": "websearch_queries2",
        "fl_IF_soc_google": "websearch_queries3",
        "fl_IF_google": "websearch_queries4",
        "fl_FIO_soc_ya": "websearch_queries5",
        "fl_FIO_ya": "websearch_queries6",
        "fl_IF_soc_ya": "websearch_queries7",
        "fl_IF_ya": "websearch_queries8",
        "email1": "websearch_queries9",
        "email2": "websearch_queries10",
        "tl": "websearch_queries11",
        "tl_soc": "websearch_queries12",
        "tl_ya": "websearch_queries13",
        "tl_ya_soc": "websearch_queries14"
};

var htmlBody = document.body;
var htmlList = JSON.stringify(link_massiv)
    .replace(/\{/g, '<ul>')
    .replace(/\}/g, '</ul>')
    .replace(/"/g, '')
    .replace(/(\w+):(\w+),?/gi, '<li><a href="$2">'+'$1</a></li>');

htmlBody.insertAdjacentHTML('beforeEnd', htmlList);
    </script>
</body>

ruslan_mart 28.07.2015 18:55 
var fragment = document.createDocumentFragment(),
    i, li, link,
    ul = document.createElement('ul');
for(i in link_massiv) {
    li = document.createElement('li');
    link = document.createElement('a');
    link.href = link_massiv[i];
    link.appendChild(document.createTextNode(i));
    li.appendChild(link);
    fragment.appendChild(li);
}

ul.appendChild(fragment);
document.body.appendChild(ul);

malefikus13 29.07.2015 09:34
Да, у меня все сработало. Проблема решена. Спасибо друзья - выручили! :)


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