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

Intro

Сначала у вас есть строка. JSON не является массивом, объектом или структурой данных. JSON - текстовый формат сериализации - так что причудливая строка, но все же просто строка. Декодируйте его в PHP с помощью json_decode() .

 $data = json_decode($json);

В нем вы можете найти:

Это то, что может быть закодировано в JSON. Или, точнее, это версии PHP, которые могут быть закодированы в JSON.

В них нет ничего особенного. Они не являются объектами JSON или массивами JSON. Вы расшифровали JSON - теперь у вас есть основные повседневные типы PHP .

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


Доступ к свойствам объекта

Вы получаете доступ к свойствам одного из этих объектов так же, как и для публичных нестатических свойств любого другого объекта, например $object->property.

$json = '
{
    "type": "donut",
    "name": "Cake"
}';

$yummy = json_decode($json);

echo $yummy->type; //donut

Доступ к элементам массива

Доступ к элементам одного из этих массивов осуществляется так же, как и для любого другой массив, например $array[0] .

$json = '
[
    "Glazed",
    "Chocolate with Sprinkles",
    "Maple"
]';

$toppings = json_decode($json);

echo $toppings[1]; //Chocolate with Sprinkles

Итерации над ним с помощью foreach .

foreach ($toppings as $topping) {
    echo $topping, "\n";
}

Глазурованный Шоколад с спринклерами Maple

blockquote>

Или беспорядок с любой из встроенных функций bazillion [].


Доступ к вложенные элементы

Свойства объектов и элементов массивов могут быть больше объектов и / или массивов - вы можете просто продолжать доступ к своим свойствам и членам как обычно, например $object->array[0]->etc.

$json = '
{
    "type": "donut",
    "name": "Cake",
    "toppings": [
        { "id": "5002", "type": "Glazed" },
        { "id": "5006", "type": "Chocolate with Sprinkles" },
        { "id": "5004", "type": "Maple" }
    ]
}';

$yummy = json_decode($json);

echo $yummy->toppings[2]->id; //5004

Передача true в качестве второго аргумента в json_decode ()

Когда вы это сделаете, вместо объектов вы получите ассоциативные массивы - массивы со строками для ключей. Снова вы получаете доступ к их элементам, как обычно, например. $array['key'].

$json = '
{
    "type": "donut",
    "name": "Cake",
    "toppings": [
        { "id": "5002", "type": "Glazed" },
        { "id": "5006", "type": "Chocolate with Sprinkles" },
        { "id": "5004", "type": "Maple" }
    ]
}';

$yummy = json_decode($json, true);

echo $yummy['toppings'][2]['type']; //Maple

Не знаю, как структурированы данные

Прочитайте документацию, независимо от того, получение JSON из.

Посмотрите на JSON - где вы видите фигурные скобки {}, ожидайте объект, где вы видите квадратные скобки [], ожидаете массив.

Нажмите декодированные данные с помощью print_r() :

$json = '
{
    "type": "donut",
    "name": "Cake",
    "toppings": [
        { "id": "5002", "type": "Glazed" },
        { "id": "5006", "type": "Chocolate with Sprinkles" },
        { "id": "5004", "type": "Maple" }
    ]
}';

$yummy = json_decode($json);

print_r($yummy);

и проверьте вывод:

stdClass Object
(
    [type] => donut
    [name] => Cake
    [toppings] => Array
        (
            [0] => stdClass Object
                (
                    [id] => 5002
                    [type] => Glazed
                )

            [1] => stdClass Object
                (
                    [id] => 5006
                    [type] => Chocolate with Sprinkles
                )

            [2] => stdClass Object
                (
                    [id] => 5004
                    [type] => Maple
                )

        )

)

Он расскажет вам, где у вас есть объекты, где у вас есть массивы, а также имена и значения их членов.

Если вы можете только дойти до него до того, как потеряетесь, зайдите так далеко и нажмите , что с print_r():

print_r($yummy->toppings[0]);
stdClass Object
(
    [id] => 5002
    [type] => Glazed
)

Разбить проблему на части, которые легче обернуть вокруг головы.


json_decode() возвращает null

Это происходит потому, что либо:

  1. JSON полностью состоит именно из этого, null.
  2. JSON is недействителен - проверьте результат json_last_error_msg или введите его через JSONLi nt .
  3. Он содержит элементы, вложенные в глубину более 512 уровней. Эта максимальная глубина по умолчанию может быть переопределена путем передачи целого числа в качестве третьего аргумента в json_decode() .

Если вам нужно изменить максимальную глубину, вы, вероятно, решение неправильной проблемы. Узнайте, почему вы получаете такие глубоко вложенные данные (например, у службы, к которой вы обращаетесь, у которой возникает JSON, есть ошибка) и получить это, чтобы этого не произошло.


Имя свойства объекта содержит специальный символ

Иногда у вас будет имя свойства объекта, которое содержит нечто вроде дефиса - или знака @, которое не может использоваться в литеральном идентификаторе. Вместо этого вы можете использовать строковый литерал в фигурных скобках для его адресации.

$json = '{"@attributes":{"answer":42}}';
$thing = json_decode($json);

echo $thing->{'@attributes'}->answer; //42

Если у вас есть свойство integer as: Как получить доступ к свойствам объекта с именами типа целых чисел? как ссылка.


Кто-то поставил JSON в ваш JSON

Это смешно, но это происходит - JSON закодирован как строка в вашем JSON. Декодирование, доступ к строке как обычно, декодирование , которое , и, в конечном счете, доступ к тому, что вам нужно.

$json = '
{
    "type": "donut",
    "name": "Cake",
    "toppings": "[{ \"type\": \"Glazed\" }, { \"type\": \"Maple\" }]"
}';

$yummy = json_decode($json);
$toppings = json_decode($yummy->toppings);

echo $toppings[0]->type; //Glazed

Данные не помещаются в память

Если ваш JSON слишком большой для json_decode(), чтобы обрабатывать сразу, все начинает становиться сложным. См. Также:


Как отсортировать его

См.: Ссылка: все основные способы сортировки массивов и данных в PHP .

1
задан ryanpcmcquen 24 March 2019 в 23:36
поделиться

1 ответ

Одной из основных проблем, которые вы затрагиваете, является назначение preloadImages[r] для new Image(), а не Array. Кроме того, вы определяете preloadImages как функцию и переменную (неявную глобальную) для использования в вашем двумерном Array. После переименования этих переменных и небольшой очистки ваш код работает нормально, как показано ниже:

document.addEventListener('DOMContentLoaded', function () {

    var queryData = [
        'https://makelin.us/100/100',
        'https://makelin.us/100/100',
        'https://makelin.us/100/100'
    ];
    var preloadImages = [];
    // First function to preload image slices into a two dimensional array.
    function preloadAllImages() {
        var row = 5;
        var col = 5;

        for (var r = 0; r < row; r++) {
            preloadImages[r] = [];
            for (var c = 0; c < col; c++) {
                preloadImages[r][c] = new Image();
                preloadImages[r][c].src = queryData[2];
            }
        }
        // console.log(preloadImages);
    }
    preloadAllImages();

    // Second function to retrieve and assemble image slices.
    function assembleImage() {
        var row = 5;
        var col = 5;
        var assembleImage = document.getElementById("prodImage");
        var imageTable = "<table>";

        for (var r = 0; r < row; r++) {
            imageTable += "<tr>";
            for (var c = 0; c < col; c++) {
                imageTable += "<td>";
                imageTable += "<img src=" + preloadImages[r][c].src + "/>";
                imageTable += "</td>";

                // console.log(preloadImages[r][c])
            }
            imageTable += "</tr>";
        }
        imageTable += "</table>";
        // console.log(imageTable);
        assembleImage.innerHTML = imageTable;
        // console.log(assembleImage);
    }
    assembleImage();
});
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="prodImage"></div>
	<script src="script.js">
	</script>
</body>

</html>

0
ответ дан ryanpcmcquen 24 March 2019 в 23:36
поделиться
Другие вопросы по тегам:

Похожие вопросы: