Как отобразить данные из файла json по определённому ключу в javascript?

Question

[Yura_Mart]

Нужно с помощью ajax запроса вывести историю заказов одного пользователя.
Данные запрашиваются у php файла, там он выдаёт json файл с информацией о заказах.

Заказы записаны в бд таким образом:

order_id        user_id        prod_name        prod_qty        prod_price      total
   10                    1             Product1                2                   100            200
   10                    1             Product2                3                   50              150
   11                    1             Product3                1                   100            100
   11                    1             Product4                4                   50              200

Вот код js:

$('document').ready(function(){

    lengthofp = function(obj) {
        var size = 0;
        $.each(my_orders, function(i, elem) {
            size++;
        });
        return size;
    };

    $.ajax({
        type: "POST",
        url: "http://sait/history.php",
        data: "user_id="+localStorage.getItem("user_id"),
        success: function(msg){
            console.log(msg);
            my_orders = JSON.parse(msg);
            for(i =1;i <= lengthofp(my_orders); i++){
                $(".my_history").append("<li>" +
                                        "<div class='collapsible-header'>" +
                                        "<div class='order-no'>" +
                                        "<span class='block bold'>"+"Заказ №"+my_orders[i.toString()]["order_id"]+"</span>" +                      
                                        "</div>" +
                                        "</div>" +
                                        "</li>");
            }
        },
        error: function(){
            swal("Ошибка!","Проверьте Интернет-соединение и повторите попытку","error");
        }
    });
});

И php:

<?php

error_reporting(E_ALL);
session_start();

define("DBHOST", "localhost");    
define("DBUSER", "root");        
define("DBPASS", "");             
define("DB", "название");        

$connection = mysqli_connect(DBHOST, DBUSER, DBPASS, DB) or die("Нет соединения с БД");
mysqli_set_charset($connection, "utf8") or die("Не установлена кодировка соединения");

if (isset($_POST['user_id'])){
    $user_id = $_POST['user_id'];
    global $connection;
    $query = "SELECT order_id, prod_name, prod_qty, prod_price, total, delivery_date FROM orders WHERE user_id = '$user_id'";
    $res = mysqli_query($connection, $query);
    $i=1;
    $orders = array();
    while($row = mysqli_fetch_assoc($res)){
        $orders[$i]= $row;
        $i++;
    }
    echo json_encode($orders);
}

?>

Выводятся заказы таким образом:

Заказ №10
Заказ №10
Заказ №11
Заказ №11

А нужно сделать по order_id:

Заказ №10
Заказ №11

Я так понял что передавать нужно все данные в php в json файле, т.к. в дальнейшем нужно будет вывести все товары в каждом заказе, но вывести нужно в javascript по определённому ключу.
Подскажите, пожалуйста, как такое реализовать?

Answer 1

[Марат Гарифуллин]

Так как я не знаю, что должно быть в итоге, тут три варианта.

Либо группируем сразу выборку:

$query = "
SELECT
  order_id,
  SUM(total) as total
FROM orders
WHERE user_id = '$user_id'
GROUP BY order_id
;"

Либо группируем на сервере по id заказа:

$orders = [];
while($row = mysqli_fetch_assoc($res)) {
  $orderId = $row['order_id'];
  unset($row['order_id']);
  $orders[$orderId]['id'] = $orderId;
  $orders[$orderId]['products'][] = $row;
}

Либо тоже самое делаем на клиенте...

Comments

[Yura_Mart]

В итоге нужно вывести историю заказов клиента(по номеру заказа).

$orders = [];
while($row = mysqli_fetch_assoc($res)) {
$orderId = $row['order_id'];
unset($row['order_id']);
$orders[$orderId]['id'] = $orderId;
$orders[$orderId]['products'][] = $row;
}

этот вариант вроде подходит, вот json файл:

{"1808-0101-2":{"order_id":"1808-0101-2","products":[{"prod_name":"\u0422\u043e\u0432\u0430\u0440 5","prod_qty":"3","prod_price":"300","total":"2600","delivery_date":"2018-12-26 21:15:30"},{"prod_name":"\u0422\u043e\u0432\u0430\u0440 6","prod_qty":"4","prod_price":"400","total":"2600","delivery_date":"2018-12-26 21:15:30"}]},"1808-0101-3":{"order_id":"1808-0101-3","products":[{"prod_name":"\u0422\u043e\u0432\u0430\u0440 1","prod_qty":"2","prod_price":"100","total":"400","delivery_date":"2018-12-29 18:30:00"},{"prod_name":"\u0422\u043e\u0432\u0430\u0440 2","prod_qty":"1","prod_price":"200","total":"400","delivery_date":"2018-12-29 18:30:00"}]}}

только вот не знаю как в js это правильно вывести

[Марат Гарифуллин]

Сгруппируй на сервере вот так

$orders = [];
while($row = mysqli_fetch_assoc($res)) {
  $orderId = $row['order_id'];
  unset($row['order_id']);
  $orders[$orderId]['id'] = $orderId;
  $orders[$orderId]['products'][] = $row;
}

А в js уже манипулировать проще

$('document').ready(function() {
    $.ajax({
        type: "POST",
        dataType: 'JSON',
        url: "http://sait/history.php",
        data: {
            user_id: localStorage.getItem("user_id")
        }
    })
    .then(orders => {
        console.dir(orders);
        orders.forEach(order => {
            const li = $('<li><div>Заказ №'+ order.order_id +'</div></li>');
            const ul = $('<ul></ul>');
            order.products.forEach(product => {
                ul.append('<li>'+ product.prod_name +'</li>');
            });
            li.append(ul);
            $(".my_history").append(li);
        });
    });
});

[Yura_Mart]

magarif, вставил js, выводит object в консоли, но в html пусто

[Марат Гарифуллин]

MadPirozhok, Чтобы подошел js код, который я чуть выше написал в php сделай так
echo json_encode(array_values($orders));

[Yura_Mart]

magarif, также пусто, только в консоли теперь array(2), вместо object(2)

[Марат Гарифуллин]

MadPirozhok, немного поправил код. Присутствует ли на странице .my_history?
<ul class="my_history"></ul>

[Yura_Mart]

magarif, конечно
вот куда выводится всё добро:

<div class="content-container">
			<h1 class="page-title" align="center">История Заказов</h1>
			<ul class="collapsible order-history my_history" data-collapsible="accordion">

			</ul>
		</div>

[Марат Гарифуллин]

Какой JSON приходит? Ошибки в консоли есть?

[Марат Гарифуллин]

так вот же ошибка, li.append должно быть

[Yura_Mart]

magarif, блин, не вижу ничего, у меня уже 4:40
спасибо вам большое, всё заработало
где бы мне набраться таких скилов)

[Марат Гарифуллин]

MadPirozhok, Много разнообразной практики. Пожалуйста)

[Yura_Mart]

magarif, а вот тут можно ещё добавить delivery_date? чтобы выводить как id?

$orders = [];
while($row = mysqli_fetch_assoc($res)) {

  $orderId = $row['order_id'];
  unset($row['order_id']);

// добавил вот тут, дальше не понимаю как
  $orderDate = $row['delivery_date'];
  unset($row['delivery_date']);
// 

  $orders[$orderId]['id'] = $orderId;
  $orders[$orderId]['products'][] = $row;
}

[Марат Гарифуллин]

MadPirozhok, Да, сумму и дату вынести можно

$orders = [];
while($row = mysqli_fetch_assoc($res)) {
  $orderId = $row['order_id'];
  $orders[$orderId]['id'] = $orderId;
  if (!isset($orders[$orderId])) {
    $orders[$orderId] = [
      'id' => $orderId,
      'total' => $row['total'],
      'date' => $row['delivery_date'],
      'products' => [],
    ];
  }
  $orders[$orderId]['products'][] = [
    'name' => $row['prod_name'],
    'price' => $row['prod_price'],
    'quantity' => $row['prod_qty'],
  ];
}

[Yura_Mart]

magarif, в вашем варианте условие не срабатывает, сделал вот так:

$orders = [];
    while($row = mysqli_fetch_assoc($res)) {

        $orderId = $row['order_id'];
        $orderDate = $row['delivery_date'];
        
        $orders[$orderId]['id'] = $orderId;
        $orders[$orderId]['date'] = $orderDate;

        $orders[$orderId]['products'][] = [
            'name' => $row['prod_name'],
            'price' => $row['prod_price'],
            'quantity' => $row['prod_qty'],
        ];
    }

и выносит как я и хотел (id, date):


чтобы действовать не наугад, про что мне нужно почитать?
как составлять массивы? или объекты?
ещё раз, огромное вам спасибо!

[Марат Гарифуллин]

MadPirozhok, Да, не удалил одну строку, вот так надо:

$orders = [];
while($row = mysqli_fetch_assoc($res)) {
  $orderId = $row['order_id'];
  if (!isset($orders[$orderId])) {
    $orders[$orderId] = [
      'id' => $orderId,
      'total' => $row['total'],
      'date' => $row['delivery_date'],
      'products' => [],
    ];
  }
  $orders[$orderId]['products'][] = [
    'name' => $row['prod_name'],
    'price' => $row['prod_price'],
    'quantity' => $row['prod_qty'],
  ];
}

Про массивы php
- php.net/manual/ru/language.types.array.php
И вообще весь сайт для изучения языка
- php.net/manual/ru

Про объекты в js
- learn.javascript.ru/object
- https://developer.mozilla.org/ru/docs/Web/JavaScri...
И вообще весь сайт для изучения языка
- learn.javascript.ru
- https://developer.mozilla.org/ru/docs/Web/JavaScri...