How to display a list coming from a Json sub-array?

Question

How to display a list coming from a Json sub-array?

Navigation

#1 by (3 votes)

3

I'm building divs dynamically via Javascript. I want to make her content display some information (username, emails, etc). The data is coming from the Database in Json format.

The problem is that it does not display all participants. Displays only the first ...

I'm setting it up like this:

$.each(value.participantes, function (index, item){
    console.log(item);       
    html+= '<div id="infoUser" class="hide infoUser">'
            + '<div class="pull-left">'
            +   '<img src="/resources/img/teste.jpg" class="foto-info-usuario" />'
            + '</div>'
            + '<div class="pull-right">'
            +   '<div>'
            +       '<i id="close" class="fa fa-times fa-lg pull-right closePopover"></i>'
            +   '</div>'
            +   '<div class="informacoes-user-texto">'
            +       '<label class="nomeUser">'+item.nome_usuario+'</label>'
            +   '<div class="fone-user">'
            +       '<i class="fa fa-phone" aria-hidden="true"></i> '+item.fone_com+''
            +   '</div>'
            +   '<div class="email-user">'
            +       '<i class="fa fa-envelope" aria-hidden="true"></i> '+item.login+''
            +   '</div>'
            +   '<div class="lista-tags wrap">'
            +       '<div class="tags">'
            +           '<div class="ribbon-top"></div>'
            +           '<div class="ribbon-bottom"></div>'
            +           '<label class="tags-user">Líder</label>'
            +       '</div>'
            +   '</div>'
            + '</div>'
            + '</div>'
            + '</div>';
});

The content of Json is this (console):

Object { nome_usuario="Albson Xavier", id_usuario=1786, login="[email protected]"}

Object { nome_usuario="Bruno Melo Pimentel", arquivo_foto="4.jpg", id_usuario=4, mais...}

Object { nome_usuario="Usuario Indefinido", id_usuario=1574, login="[email protected]"}

Object { nome_usuario="Albson Xavier", id_usuario=1786, login="[email protected]"}

Object { nome_usuario="Lucinéa Correia", id_usuario=1519, login="[email protected]"}

Object { nome_usuario="Albson Xavier", id_usuario=1786, login="[email protected]"}

Object { nome_usuario="Mere Magalhães", id_usuario=3, login="[email protected]"}

Object { nome_usuario="Albson Xavier", id_usuario=1786, login="[email protected]"}

Object { nome_usuario="Albson Xavier", id_usuario=1786, login="[email protected]"}

Object { nome_usuario="Vilanêz Brayner", arquivo_foto="5.jpg", id_usuario=5, mais...}

Object { nome_usuario="Cledson Lima", id_usuario=1, login="[email protected]"}

Object { nome_usuario="Marcos Moraes", id_usuario=2, login="[email protected]"}

Object { nome_usuario="Albson Xavier", id_usuario=1786, login="[email protected]"}

Object { nome_usuario="Anderson Souza", arquivo_foto="teste.jpg", id_usuario=1702, mais...}

javascript html jquery json each

asked by anonymous 04.11.2016 / 18:04

1 answer

How to set a Tray Icon (tray icon) in a PyQt application? How to make a composer package available? [duplicate]

score 3 · Accepted Answer

Using the HTML of the form below works normally:

var html = "";
var participantes = [
  {nome_usuario: "Albson Xavier", id_usuario: 1786, login: "[email protected]"},
  {nome_usuario: "Usuario Indefinido", id_usuario: 1574, login: "[email protected]"}
];

$.each(participantes, function (index, item){
  html+= '<div id="infoUser' + index + '" class="hide infoUser">'
  + '<div class="pull-left">'
  +   '<img src="/resources/img/teste.jpg" class="foto-info-usuario" />'
  + '</div>'
  + '<div class="pull-right">'
  +   '<div>'
  +       '<i id="close' + index + '" class="fa fa-times fa-lg pull-right closePopover"></i>'
  +   '</div>'
  +   '<div class="informacoes-user-texto">'
  +       '<label class="nomeUser">'+item.nome_usuario+'</label>'
  +   '<div class="fone-user">'
  +       '<i class="fa fa-phone" aria-hidden="true"></i> '+item.fone_com+''
  +   '</div>'
  +   '<div class="email-user">'
  +       '<i class="fa fa-envelope" aria-hidden="true"></i> '+item.login+''
  +   '</div>'
  +   '<div class="lista-tags wrap">'
  +       '<div class="tags">'
  +           '<div class="ribbon-top"></div>'
  +           '<div class="ribbon-bottom"></div>'
  +           '<label class="tags-user">Líder</label>'
  +       '</div>'
  +   '</div>'
  + '</div>'
  + '</div>'
  + '</div>';
});

$("#conteudo").append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="conteudo">
</div>