How to replace the contents of an array?

Asked

Viewed 569 times

0

I have a div (users' mosaic) that within it has a array (javascript) with photos of users(data coming from the database). The amount of photos of users must be less than or equal to 15. If the array has less than 15 users(photos), must be filled with an icon or image representing that is without user.

Can someone help me?

Below is an example:

html += '<div class="mosaico-user wrap">'
        +   '<div class="liderGrupo"></div>';

var iconePadrao = '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>';
var demoParticipantes = ['<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste1.jpg" class="fotousuario"></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste.jpg" class="fotousuario"></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/4.jpg" class="fotousuario"></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste1.jpg" class="fotousuario"></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste.jpg" class="fotousuario"></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/4.jpg" class="fotousuario"></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste1.jpg" class="fotousuario"></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste.jpg" class="fotousuario"></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/4.jpg" class="fotousuario"></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x usuarioSemFoto" aria-hidden="true"></i></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x usuarioSemFoto" aria-hidden="true"></i></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x usuarioSemFoto" aria-hidden="true"></i></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x usuarioSemFoto" aria-hidden="true"></i></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>',
                        '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>'
                        ];
var conteudo = "";
var i;

for (i = 0; i < 15; i++) {
    conteudo = demoParticipantes[i];
    html += conteudo;
}
javascript html array for
  • 1

    Sure! If you provide some code, preferably HTML and javascript.

  • Sorry. I added an example to facilitate.

  • I swear that by default I have been codando and created a good answer, but stopped to read again your question and looked at my answer. This is such a basic/easy thing, it feels like you didn’t even try to do it and have already come to you for help. Please show what you’ve done and what’s not working that we’ll help you, give the answer so right away does not roll here at Stackoverflow, just paying the time $$.

  • Show, now it’s just up to you to validate if your array has 15 elements, if not, you enter the icon value in the array and dps iterates and fills the content.

  • face poe o Cod seu q pulls from db and etc he much easier in my opinion you deal in the language that pulls from db the amount of items in the array

  • 1

    Guys, easy or hard is a valid question. OP provided the code, if a similar question has already been answered only mark as duplicate, otherwise stackoverflowers are here to help. I think you can post your solution @Giovane =]

  • @Lucascosta opened the question and saw without code and hit me that feeling of GUJ with the crowd wanting the job done and effortlessly.

  • 1

    I understand you @Giovane, but it was not effortless. I tried a few ways here but I didn’t get the result I wanted. I initially posted the question, but forgot to insert a code exemplifying my attempt.

Show 3 more comments

1 answer

1


Try the following before yours for which inserts the contents into the variable html.

while(demoParticipantes.length < 15) {
    demoParticipantes.push(iconePadrao);
}

  • Thanks @Giovane, it worked the way I hoped.

  • @Andréalbson É nois!

Browser other questions tagged javascript html array for

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