Вопрос как добавить в селект данные из БД

Суть вот в чем... Есть форма для товара, генерируется и выводиться на страницу, все ок... Основные данные вытаскиваю из БД..... Но есть одна проблема, нужно добавить селект и также вытащить данные из БД.

Тут я выгружаю данные из БД

     $.post (
        "core.php",
        {
            "action" : "LoadCanopy"
        },
    loadCanopy
    );
}

Код в файле core.php

     $action = $_POST['action'];
     require_once 'DBfunction.php';
     switch ($action) {
         case 'LoadCanopy' : LoadCanopy();
             break;
         case 'LoadCanopySize' : LoadCanopySize();
             break;
     }

Функции LoadCanopy и loadCanopySize

<?php
function LoadCanopy() {
    require_once 'DBconect.php';
    $sql = "SELECT * FROM `products` WHERE `prod_type`= 'Canopy'";
    $result = $pdo->query($sql);
    $outCanopy=array();
    while ($row = $result->fetch()) {
        $outCanopy[$row['product_ID']] = $row;
    }
    echo json_encode($outCanopy);
    $pdo = NULL;
}
function LoadCanopySize() {
    include 'DBconect.php';
    $sql = "SELECT `Canopy_Size` FROM `canopy_size` WHERE `prod_type`= 'Canopy'";
    $result = $pdo->query($sql);
    while ($row = $result->fetch()) {
//Тут пока даже не врубаю че делать
}

И тут уже генерирую форму и вывожу ее на страницу. все ок все работает, Но нужно добавить селект

function loadCanopy(data) {
    //Выгружаются данные из Canopy.Json
    data = JSON.parse(data);
    console.log(data);
    var out = '';
    for (var key in data) {
        out+='<div class="Product">';
        out+='<H1>'+data[key]['prod_name']+'</H1>';
        out+='<p><b>'+data[key]['Canopy_class']+'</b></p>';
        out+='<p><b>Cost:'+data[key]['prod_cost']+'$</b></p>';
        out+='<img class="img" src="'+data[key]['prod_img']+'">';
//И вот тут я не врубаюсь
                out+='<select name="CanopySize">';
                out+='<option>--Выдерите размер--</option>';
                out+='<option value="">          </option>';
                out+='</select>';
        out+='<button class="add1" data-id="'+key+'">Добавить</button>';
        out+='</div>'; 

Ответы (1 шт):

Автор решения: andreycrane

Вам необходимо сделать цикл по полученным из ajax данным для формирования нужной разметки.

function loadCanopy(data) {
    //Выгружаются данные из Canopy.Json
    data = JSON.parse(data);
    console.log(data);
    var out = '';
    for (var key in data) {
        out+= '<div class="Product">';
        out+= `<H1>${data[key]['prod_name']}</H1>`;
        out+= `<p><b>${data[key]['Canopy_class']}</b></p>`;
        out+= `<p><b>Cost:${data[key]['prod_cost']}$</b></p>`;
        out+= `<img class="img" src="${data[key]['prod_img']}">`;
        out+= '<select name="CanopySize">';
        out+= '<option>--Выберите размер--</option>';
        out+= data[key].canopy_size.reduce(
            (acc, [key, value]) => (acc += `<option value=${value}>${key}</option>`),
            ''
        )
        out+= '</select>';
        out+= '<button class="add1" data-id="'+key+'">Добавить</button>';
        out+= '</div>';

Это если рассуждать приблизительно.

→ Ссылка