Передача многомерных массивов из PHP в JavaScript

Ранее мы продемонстрировали, как функция json_encode может быть использована для передачи массивов PHP в строки JSON и массивы JavaScript. В данной статье мы продолжим демонстрацию с многомерными массивами. Один массив имеет числовой индекс, два других — смешанный числовой и ассоциативный.

Вывод в Javascript

Независимо от того, является ли ваш массив PHP одноуровневым или многоуровневым, имеет ли он числовой индекс или ассоциативный, следующие команды, помещенные в скриптовые теги, выведут его в JavaScript:

var ar = <?php echo json_encode($ar) ?>;

Скорее всего, вы захотите использовать JSON.parse от JavaScript для обработки результатов json_encode от PHP, в этом случае вместо него вы будете использовать следующее, как показано в одном из примеров ниже:

var ar = JSON.parse( '<?php echo json_encode($ar) ?>' );

Для приведенных ниже примеров массивов сначала я покажу массив в PHP, затем включаем сегмент JavaScript, где для вывода используется json_encode, затем показываю вывод (закомментированный). И наконец, показываю синтаксис, используемый для доступа к полученным элементам массива или свойствам объекта в JavaScript.

Пример первого массива

Первый пример массива имеет два уровня, оба с числовым индексом.

<?php
// PHP array
$products = array(
    // product abbreviation, product name, unit price
    array('choc_cake', 'Chocolate Cake', 15),
    array('carrot_cake', 'Carrot Cake', 12),
    array('cheese_cake', 'Cheese Cake', 20),
    array('banana_bread', 'Banana Bread', 14)
);
?>
<script type="text/javascript">
// pass PHP array to JavaScript array
var products = <?php echo json_encode( $products ) ?>;

// result seen through view source
// var products = [["choc_cake","Chocolate Cake",15],["carrot_cake","Carrot Cake",12],["cheese_cake","Cheese Cake",20],["banana_bread","Banana Bread",14]];

// how to access elements in multi-dimensional array in JavaScript
alert( products[0][1] ); // Chocolate Cake
</script>

Числовые индексированные массивы PHP по умолчанию выводятся json_encode как литералы массивов в JavaScript. Ассоциативные массивы PHP выводятся как литералы объектов.

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

alert( products[0][1] ); // Chocolate Cake

Когда вы выводите массив PHP в JavaScript, вы можете увидеть результат с помощью команды меню браузера View Source. Он отображается выше в закомментированной строке:

// var products = [["choc_cake","Chocolate Cake",15],["carrot_cake","Carrot Cake",12], ...

Обратите внимание, что вывод json_encode не содержит пробелов. Вы можете включить дополнительный параметр JSON_PRETTY_PRINT, чтобы включить пробелы и возвраты каретки в вывод для более удобного просмотра. Следующий пример демонстрирует это.

Пример второго массива

В данном примере PHP массив смешанный, с числовым индексом на внешнем уровне и ассоциативным индексом на втором уровне:

<?php
// PHP array
$books = array(
    array(
        "title" => "Professional JavaScript",
        "author" => "Nicholas C. Zakas"
    ),
    array(
        "title" => "JavaScript: The Definitive Guide",
        "author" => "David Flanagan"
    ),
    array(
        "title" => "High Performance JavaScript",
        "author" => "Nicholas C. Zakas"
    )
);
?>

В выводе json_encode внешний уровень является литералом массива, а второй уровень образуют литералы объектов. Этот пример демонстрирует использование опции JSON_PRETTY_PRINT с json_encode для более читабельного вывода, как показано в комментариях к коду ниже:

<script type="text/javascript">
// pass PHP array to JavaScript 
var books = <?php echo json_encode($books, JSON_PRETTY_PRINT) ?>;

// output using JSON_PRETTY_PRINT
/* var books = [ // outer level array literal
    { // second level object literals
        "title": "Professional JavaScript",
        "author": "Nicholas C. Zakas"
    },
    {
        "title": "JavaScript: The Definitive Guide",
        "author": "David Flanagan"
    },
    {
        "title": "High Performance JavaScript",
        "author": "Nicholas C. Zakas"
    }
]; */

// how to access 
console.log( books[1].author ); // David Flanagan
</script>

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

// to access author of 2nd book
console.log( books[1].author ); // David Flanagan

Пример третьего массива

Массив PHP для этого примера также является смешанным. Внешний уровень ассоциативный, внутренний уровень смешанный, большинство записей имеют числовой индекс, за исключением подмассива vegetables:

<?php
$food_groups = array(
    'meat' => array(),
    'vegetables' => array(
        'leafy' => array('collard greens', 'kale', 'chard', 'spinach', 'lettuce'),
        'root' => array('radish', 'turnip', 'potato', 'beet'),
        'other' => array('brocolli', 'green beans', 'corn', 'tomatoes')
    ),
    'grains' => array('bread', 'rice', 'oatmeal'),
    'legumes' => array('kidney beans', 'lentils', 'split peas'),
    'fruits' => array('apple', 'raspberry', 'pear', 'banana'),
    'sweets' => array('cookies', 'brownies', 'cake', 'pie'),
);
?>

Этот пример демонстрирует использование JSON.parse на выходе json_encode. Для этого теги PHP заключены в одинарные кавычки:

<script type="text/javascript">
// using JSON.parse with json_encode
var food_groups = JSON.parse( '<?php echo json_encode($food_groups) ?>' );

// JSON_PRETTY_PRINT not used since it would trigger error with JSON.parse

/* output manually formatted so you can read it
{
    "meat":[],
    "vegetables":{
        "leafy":["collard greens","kale","chard","spinach","lettuce"],
        "root":["radish","turnip","potato","beet"],
        "other":["brocolli","green beans","corn","tomatoes"]
    },
    "grains":["bread","rice","oatmeal"],
    "legumes":["kidney beans","lentils","split peas"],
    "fruits":["apple","raspberry","pear","banana"],
    "sweets":["cookies","brownies","cake","pie"]
}
*/

// demonstrating access
console.log( food_groups['vegetables']['leafy'][0] ); // collard greens
console.log( food_groups.sweets[1] ); // brownies
</script>

Мы не можем использовать JSON_PRETTY_PRINT с JSON.parse, так как это приведет к ошибке JavaScript: unterminated string literal.

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

alert( food_groups['vegetables']['leafy'][0] ); // collard greens
alert( food_groups.sweets[1] ); // brownies

В приведенном выше примере нет необходимости использовать JSON.parse. Средства доступа, продемонстрированные с помощью console.log и alerts, были бы одинаковыми независимо от того, использовался ли JSON.parse или нет. Так как же узнать, когда и нужно ли использовать JSON.parse? Читайте в следующих статьях, чтобы получить дополнительную информацию по этому вопросу.