Как сконструировать из объекта javascript html код в котором нужно задействовать значения по ключам

165

22 мая 2022, 08:50

Вот что я пытался сделать в php:

global $conn;
                    
        $sql = "SELECT * FROM gallery ORDER BY id DESC";            
        $stmt = mysqli_stmt_init($conn);            
        if(!mysqli_stmt_prepare($stmt,$sql)){           
            echo "Database problems";           
        }else{          
            mysqli_stmt_execute($stmt);         
            $res = mysqli_stmt_get_result($stmt);
            $data = [];         
            while($row = mysqli_fetch_assoc($res)){         
                echo '<a href="#">  
                <form method="post" action="w7_controller.php" id="delete-form">                
                <div style = "background-image: url(img/'.$row["img"].');"></div>           
                <h3>'.$row["title"].'</h3>          
                <p>'.$row["des"].'</p>  
                <input type="hidden" name="page" value="MainPage">
                <input type="hidden" name="command" value="DeletePicture">
                <input type = "hidden" name="idPicture" value='.$row["id"].'>   
                <input type = "hidden" name="userIdPicture" value='.$row["userid"].'>
                <button id="delete" type="button">delete</button>   
                </form>             
                </a>';                  
            }           
        }

Но вместо я переделал этот метод в:

    global $conn;
                
    $sql = "SELECT * FROM gallery ORDER BY id DESC";            
    $stmt = mysqli_stmt_init($conn);            
    if(!mysqli_stmt_prepare($stmt,$sql)){           
        echo "Database problems";           
    }else{          
        mysqli_stmt_execute($stmt);         
        $res = mysqli_stmt_get_result($stmt);
        $data = [];         
        while($row = mysqli_fetch_assoc($res)){         
            $data['img-file'] = $row["img"];
            $data['idPicture'] = $row["id"];
            $data['userIdPicture'] = $row["userid"];
            $data['title'] = $row["title"];//updated не включен в JSON в примере
            $data['des'] = $row["des"];//updated не включен в JSON в примере
            echo json_encode($data);                
        }           
    }

и из того что вернет мне json_encode мне нужно получить в ajax и сконструировать к что-то на подобии(это картинки из базы данных с описанием и тайтлом) первого метода но в javascript функции из декодированного объекта.Прошу помощи у знатоков javascript'a.Заранее спасибо!

Answer 1

Вот что по итогу сделал,мягко говоря не идеально скорее всего.Но все вроде работает,за исключением проблемы как на скрине , один undefined перед началом картинок

function load_image() 
{
        global $conn;
                    
        $sql = "SELECT * FROM gallery ORDER BY id DESC";            
        $result = mysqli_query($conn, $sql);
        $data = [];
        $i = 0;
        while($row = mysqli_fetch_assoc($result))
            $data[$i++] = $row;
        echo json_encode($data);
}

function construct_images(data)  // javascript
{
    var obj = JSON.parse(data); 
    var table;
    var array_img = [];
    var array_title = [];
    var array_des = [];
    var array_idPicture = [];
    var array_userIdPicture = [];
    for (var i = 0; i < obj.length; i++) {
        for (var p in obj[i]){
            array_img[i]=obj[i].img;
            array_title[i]=obj[i].title;
            array_des[i]=obj[i].des;
            array_idPicture[i]=obj[i].idPicture;
            array_userIdPicture[i]=obj[i].userIdPicture;
        }
        table += '<a href="#">';
        table += '<form method="post" action="w7_controller.php" id="delete-form">';            
        table +='<div style = "background-image: url(img/';
        table +=array_img[i];
        table +=');">';
        table +='</div>';       
        table +='<h3>';
        table +=array_title[i];
        table +='</h3>';        
        table +='<p>';
        table +=array_des[i];
        table +='</p>'; 
        table +='<input type="hidden" name="page" value="MainPage">';
        table +='<input type="hidden" name="command" value="DeletePicture">';
        table +='<input type = "hidden" name="idPicture" value=';
        table +=array_idPicture[i];
        table +='>';    
        table +='<input type = "hidden" name="userIdPicture" value=';
        table +=array_userIdPicture[i];
        table +='>';
        table +='<button id="delete" type="button">delete</button>';
        table +='</form>';              
        table +='</a>';
    }
    return table;
}