3.2.1. Вывод ключей и значений из массива “ключ-значение”

Когда речь заходит об извлечении данных из массива, изменении или добавлении новых данных, необходимо уметь «пробегаться» по элементам массива. В случае массива «ключ-значение» также полезно уметь извлекать данные по ключу, выводить только ключевые элементы или их значения.

Рассмотрим пример вывода ключевых элементов и значений, которые по ним хранятся. Для этого создадим пустую html-страницу (Листинг 3.12) и свяжем её с JS-скриптом (Листинг 3.13).

Листинг 3.12. Файл 1.html — Пустая html-страница

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Обработка массивов</title>
<script type="text/javascript" src="http://it-bloknot.ru/jquery.js"></script>
<script type="text/javascript" src="http://it-bloknot.ru/myscript.js"></script>
</head>
<body>
</body>
</html>

В листинге 3.13 рассмотрим несколько массивов «ключ-значение». Необходимые данные выведем в html-страницу.

Листинг 3.13. Файл myscript.js — Массив «ключ-значение»

$(document).ready(function()
$("body").append(str2);
>);

В Листинге 3.15 представлены два массива array и array2. Рассмотрим работу с этими массивами в отдельности:

array представляет собой массив «ключ-значение». В качестве значений — простые строки. Для вывода ключей и значений в html-страницу используется строковая переменная str. Её значение изначально задано как str2 = "<h3 align='center'>Массив array2</h3>". Здесь присутствуют теги формирования заголовка страницы. Далее к ним будут прибавлены (слиты) все остальные данные. Чтобы организовать перебор и вывод ключей и значений используется цикл for (key in array). Эту строку можно прочитать так: «для каждого key из массива array. », т.е. переменная key в данном случае присваивает себе значение ключа: сначала первого по счёту (one), потом второго (two) и, наконец, третьего (three). Для каждого клуча осуществляется операция str1 += "<p> <b> Ключ:</b> "+ key + ".<b> Значение: </b> "+ array[key]+"</p>", т. е. добавление к заданной строке нового значения. Здесь есть знакомые вам html-теги, значение ключа (key) и значение по соответствующему ключу (array[key]). После того, как цикл прошёл все ключи массива, осуществляется вывод переменной str1 в html-страницу $("body").append(str1).
array2 также представляет собой массив «ключ-значение». В качестве значений здесь — массивы разной длины (т.е. с разным количеством элементов внутри). Возможна и более запутанная ситуация, когда в качестве значений выступает массив «ключ значение». Таким образом, можно организовать сколь угодно сложную структуру элементов. В случае массива array2 необходимо вывести ключи в виде html-параграфов, а значения внутреннего массива в виде списка «идентификатор-значение». Для этого используются два цикла. Первый пробегается по ключам (по смыслу он не отличается от того, что использовался для массива array). Второй цикл (внутренний) пробегает по внутренним массивам, согласно ключу, выбранному первым циклом (for (value in array2[key])). В данном случае value будет являться порядковым номером элемента внутреннего массива. т.е. значением 0, 1, . Чтобы получить значение по идентификатору, который хранится в переменной value, используется запись array2[key][value]. Эту запись можно прочитать следующим образом: «показать значение по идентификатору value, которое является значением для ключа key массива array2». Окончательный результат также выводится в html-страницу: $("body").append(str2). Обратите внимание, как формируется значение переменной str2 в ходе прохождения по циклу. Внутренний цикл формирует элементы списка <li></li>. Главный цикл — параграфы <p></p> и главный тег для списка <ul> (до вхождения во внутренний цикл) </ul> (после выхода из внутреннего цикла). Таким образом, можно получить хороший внешний вид окончательного варианта html-страницы (Рис. 3.6).

На Рис. 3.6 представлен результат обработки массивов array и array2.

📎📎📎📎📎📎📎📎📎📎