How to view a list from a Json sub-array?

Asked

Viewed 340 times

3

I’m building Ivs dynamically via Javascript. I want to make its content display some information (usernames, emails, etc). The data is coming from the database in Json format.

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

I’m riding that way:

$.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 jquery html json each

  • Try to remove the "ids" from the HTML elements. This property has the purpose of being unique.

  • Could you make sure that 'html' is correct at the end of the loop? Could you post the rest of the code?

  • Yes, I’ve already made sure the html is correct. The problem is that it’s not just taking the first item of the json array. He can’t demand other users' names, for example... you know?

  • Try to remove the "ids" from the HTML elements. This property has the purpose of being unique

  • I did, but the problem remains.

  • You can make a Jsfiddle with your code so we can evaluate the problem? Or put the entire function of . js.

  • How are you rendering the 'html' variable' ?

  • By Jsfiddle it gets really bad. Better post all JS function.

  • You can put here the result of JSON.stringify(value.participantes);?

  • https://jsfiddle.net/andrealbson/whbzupfd/

  • In the link above (jsfiddle), I put the whole JS function.

  • @Andréalbson tests like this: https://jsfiddle.net/whbzupfd/1/ works?

  • It did not work. Same error occurs

  • @Andréalbson can make a jsFiddle with the problem to happen live? otherwise it is difficult to have this question answer and be useful to someone else...

  • I tested your code, added some items, and it worked normally here: https://jsfiddle.net/eojfqk7u/

Show 10 more comments

1 answer

3


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>
<div id="conteudo">
</div>

  • Here it didn’t work :(

  • 1

    Did this same example not work for you? Which browser?

  • I use Google Chrome

  • Clicking on play in the above example does not work tbm?

  • It did work! Thanks for your help.

Browser other questions tagged javascript jquery html json each

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