Mount html structure with result of ajax array?

Asked

Viewed 373 times

1

I would like the following structure for my page:

<div id="ProdutosSeller" class="col-md-3 col-sm-6 hero-feature">
            <div class="thumbnail">
                <img src="imagem" alt="">
                <div class="caption">
                    <div class="name" title="<?php echo $produto['name']; ?>">
                        nome do produto
                    </div>
                    <br>
                    <div class="price">
                        <span class="price-old"><strong>R$ preço do produto</strong></span>
                    </div>
                    <br>
                    <p>
                        descricao do produto
                    </p>
                    <p>
                        <a href="index.php?route=product/product&product_id=id do produto" class="btn btn-primary">Comprar</a>
                    </p>
                </div>
            </div>
            <br>
        </div>

My script is like this:

<script type="text/javascript">

    var count = 0;



    function verMaisProdutos() {
        count = count + 4;

                $.ajax({
                    url : "index.php?route=customerpartner/profile/getAjaxProducts&id=58&offset=" + count, //Página PHP que seleciona postagens
                    type : 'POST', // método post, GET ...
                    dataType: 'html',
                    success : function(data) {// sucesso de retorno executar função
                        $('#ProdutosSeller').append(data);
                        // adiciona o resultado na div #conteudo
                    } // fim success
                }); // fim ajax

    }
</script>

And the data array information is coming like this: 

[{"product_id":"112","model":"A-744362K","sku":"744362K","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"1","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"53","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"113","model":"I-502165","sku":"502165","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"54","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"114","model":"L-201150","sku":"201150","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"55","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"115","model":"B-207191","sku":"207191","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"56","customer_id":"58","seller_price":"8.5","currency_code":"BRL"}]
javascript jquery html ajax

  • Make $('#Productosseller'). html(date);

3 answers

1


You need to go through JSON and assemble the structure with the data of each product, see an example:

var response = [{"product_id":"112","model":"A-744362K","sku":"744362K","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"https://placeholdit.imgix.net/~text?txtsize=24&txt=150%C3%97150&w=150&h=150","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"1","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"53","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"113","model":"I-502165","sku":"502165","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"https://placeholdit.imgix.net/~text?txtsize=24&txt=150%C3%97150&w=150&h=150","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"54","customer_id":"58","seller_price":"8.5","currency_code":"BRL"}];
//loop nos objetos do JSON
$.each(response,function(){
  var produto = $(this).get(0);//seleciona o produto
  $thumb = $('<div class="thumbnail"></div>');//cria a div principal
  $thumb.html('<img src="'+produto.image+'"/>'); //imagem
  $thumb.append('<div class="name" title="' + produto.model + '">' + produto.model + '</div>');//name
  $thumb.append('<br>');
  $thumb.append('<div class="price"><span class="price-old"><strong>R$ '+produto.price+'</strong></span></div>'); //price
  $thumb.append('<br>');
  $thumb.append('<p>'+produto.model+'</p>');//descrição
  $thumb.append('<p><a href="index.php?route=product/product&product_id='+produto.product_id+'" class="btn btn-primary">Comprar</a></p>');//link para comprar
  $('#ProdutosSeller').append($thumb);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="ProdutosSeller" class="col-md-3 col-sm-6 hero-feature text-center">
    <div class="thumbnail">
        <img src="https://placeholdit.imgix.net/~text?txtsize=24&txt=150%C3%97150&w=150&h=150" alt="">
        <div class="caption">
            <div class="name" title="Titulo">
                nome do produto
            </div>
            <br>
            <div class="price">
                <span class="price-old"><strong>R$ preço do produto</strong></span>
            </div>
            <br>
            <p>
                descricao do produto
            </p>
            <p>
                <a href="index.php?route=product/product&product_id=id do produto" class="btn btn-primary">Comprar</a>
            </p>
        </div>
    </div>
    <br>
</div>

  • I got it the way you put it, but it doesn’t show up, so what? the path is returning me like this : Catalog/tensioning-belts-Gates.jpg BD

  • @user76855 Most likely the path does not exist, try to inspect the element and ask to open the image in a new tab to check if it exists.

  • Got missing a path image, thanks!!!!!

0

Oops, having the json makes it easier :D come on

insira o código aq


let val = [{"product_id":"112","model":"A-744362K","sku":"744362K","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"1","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"53","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"113","model":"I-502165","sku":"502165","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"54","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"114","model":"L-201150","sku":"201150","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"55","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"115","model":"B-207191","sku":"207191","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"56","customer_id":"58","seller_price":"8.5","currency_code":"BRL"}]

let oi = val.map(function(valor){
  $('body').append('<h1>'+valor.id+'</h1>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • there is only passing the other values as name and etc, and go putting the div as you prefer

0

My script went like this:

insira o código aqui var Count = 0;

function verMaisProdutos() {
    count = count + 4;
            $.ajax({
                url : "index.php?route=customerpartner/profile/getAjaxProducts&id=58&offset="+ count, //Página PHP que seleciona postagens
                type : 'POST', // método post, GET ...
                dataType : 'html',
                success : function(data) {// sucesso de retorno executar função
                    var response = JSON.parse(data);
                    var i = 0;
                            $.each(response,function() {
                                        var produto = $(this).get(0);//seleciona o produto
                                        $thumb = $('<div class="col-md-3 col-sm-6 hero-feature"></div>');//cria a div principal
                                        $thumb.append('<div class="thumbnail"></div>');
                                        $thumb.html('<img src="'+produto.image+'">'); //imagem
                                        $thumb.append('<div class="caption"></div>');
                                        $thumb.append('<div class="name" title="' + produto.name + '">'+ produto.name+ '</div>');//name
                                        $thumb.append('<br>');
                                        $thumb.append('<div class="price"><span class="price-old"><strong>R$ '+ produto.price + '</strong></span></div>'); //price
                                        $thumb.append('<br>');
                                        $thumb.append('<p>' + produto.description + '</p>');//descrição
                                        $thumb.append('<p><a href="index.php?route=product/product&product_id='+ produto.product_id + '" class="btn btn-primary">Comprar</a></p>');//link para comprar
                                        $('#ProdutosSeller').append($thumb);
                                    });// adiciona o resultado na div #conteudo
                            } // fim success
            }); // fim ajax

}

however the image does not appear, what can it be? the path is returning me like this : Catalog/tensioning-belts-Gates.jpg from the BD

Browser other questions tagged javascript jquery html ajax

You are not signed in. Login or sign up in order to post.