Each row of the database enters a separate DIV

Question

Each row of the database enters a separate DIV

Navigation

#1 by (1 votes)

1

Good afternoon I'm trying to make a MySQLi query, that is, I want each row of the database to go into a separate div, I searched and did not find anything similar to what I think it gets in a difficult way to understand

HTML code

<div id="inicio" class="col-md-4 col-sm-4 col-xs-12 profile_details">
  <div class="well profile_view">
    <div class="col-sm-12">
      <h4 class="brief"><i>Digital Strategist</i></h4>
      <div class="left col-xs-7">
        <h2 id="inicio"></h2>
        <p><strong>About: </strong> Web Designer / UX / Graphic Artist / Coffee Lover </p>
        <ul class="list-unstyled">
          <li><i class="fa fa-building"></i> Address: </li>
          <li><i class="fa fa-phone"></i> Phone #: </li>
        </ul>
      </div>
      <div class="right col-xs-5 text-center">
        <img src="../images/img.jpg" alt="" class="img-circle img-responsive">
      </div>
    </div>
    <div class="col-xs-12 bottom text-center">
      <div class="col-xs-12 col-sm-6 emphasis">
        <p id="inicio" class="ratings">
          <a>4.0</a>
          <a href="#"><span class="fa fa-star"></span></a>
          <a href="#"><span class="fa fa-star"></span></a>
          <a href="#"><span class="fa fa-star"></span></a>
          <a href="#"><span class="fa fa-star"></span></a>
          <a href="#"><span class="fa fa-star-o"></span></a>
        </p>
      </div>
      <div class="col-xs-12 col-sm-6 emphasis">
        <button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
                                                    </i> <i class="fa fa-comments-o"></i> </button>
        <button type="button" class="btn btn-primary btn-xs">
                                                    <i class="fa fa-user"> </i> View Profile
                                                </button>
      </div>
    </div>
  </div>
</div>

JavaScript

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

  //CarregarFuncionarios
  $.getJSON("../include/carrFunc.php", function(data) {
    var items = [];
    i = 0;
    $.each(data, function(i) {
      items.push("<option value='" + data[i].idFuncionario + "'>" +
        data[i].nomeFunc + "</option>");
    });
    $("#inicio").append(items);
  });

});

PHP

<?php
include "conexao.php";

$sql = "SELECT idFuncionario,nomeFunc FROM tbfuncionario;";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
    // output data of each row
    $data = $result->fetch_all( MYSQLI_ASSOC );
    //print_r ($data);
} else {
    echo "Nenhum resultado encontrado.";
}       
$conn->close();
//echo "<br>";
echo json_encode( $data );
?>

php javascript html ajax mysqli

asked by anonymous 07.06.2017 / 19:40

1 answer

Insert a submenu into a JMenu Enable arrows in horizontal scroll

score 1 · Accepted Answer

To do this you have to iterate the JSON that you receive more or less as you have in the question.

You can do this in a giant concatenation of HTML, or use existing HTML templates or chunks.

Using your HTML, and the JSON you showed you could do something like the example below. It's template-style, and it's a good way to learn and have control over the code. The idea is to put + obj.chave + where it is needed.:

function gerarFunctionario(obj){
 return '<div class="well profile_view">'+
    '<div class="col-sm-12">'+
      '<h4 class="brief"><i>Digital Strategist</i></h4>'+
      '<div class="left col-xs-7">'+
        '<h2>'+obj.nomeFunc+'</h2>'+
        '<p><strong>About: </strong> Web Designer / UX / Graphic Artist / Coffee Lover </p>'+
        '<ul class="list-unstyled">'+
          '<li><i class="fa fa-building"></i> Address: </li>'+
          '<li><i class="fa fa-phone"></i> Phone #: </li>'+
        '</ul>'+
      '</div>'+
      '<div class="right col-xs-5 text-center">'+
        '<img src="../images/img.jpg" alt="" class="img-circle img-responsive">'+
      '</div>'+
    '</div>'+
    '<div class="col-xs-12 bottom text-center">'+
      '<div class="col-xs-12 col-sm-6 emphasis">'+
        '<p id="inicio" class="ratings">'+
          '<a>4.0</a>'+
          '<a href="#"><span class="fa fa-star"></span></a>'+
          '<a href="#"><span class="fa fa-star"></span></a>'+
          '<a href="#"><span class="fa fa-star"></span></a>'+
          '<a href="#"><span class="fa fa-star"></span></a>'+
          '<a href="#"><span class="fa fa-star-o"></span></a>'+
        '</p>'+
      '</div>'+
      '<div class="col-xs-12 col-sm-6 emphasis">'+
        '<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">'+
            '</i> <i class="fa fa-comments-o"></i> </button>'+
        '<button type="button" class="btn btn-primary btn-xs">'+
             '<i class="fa fa-user"> </i> View Profile'+
         '</button>'+
      '</div>'+
    '</div>'+
  '</div>';
}

var data = [{
    "idFuncionario": "7",
    "nomeFunc": "Anderson Silva"
  },
  {
    "idFuncionario": "2",
    "nomeFunc": "Maria Silva"
  }
]

var html = data.map(gerarFunctionario).join('');
$("#inicio").html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="inicio" class="col-md-4 col-sm-4 col-xs-12 profile_details">

</div>