mouseclickで配列を反復するJS

Question

私はこのコードを持っています。このボタンをクリックすると、この関数が呼び出され、約束通りに配列が返されます。 この配列では、likeまたはdislikeボタンをクリックして、次に配列の次の項目に移動したり、次回の表示を繰り返したりして、繰り返していきたいと思います。私は

for (var i = 0; i < users_array.length; i++) { 
    console.log(users_array[i].name); 
    document.getElementById('displayUsers').innerHTML = users_array[i].name; 
} 

の下に試してみましたが、このすべては、それが配列の最後の名前でinnerHTMLプロパティを置き換えません。コードはforループではなく配列を制御できるように変更する必要があります。残りのコードは次のとおりです。

document.getElementById('revealUser').onclick = displayDaUsers 


function displayDaUsers(users_array){ 
    pullAllUsersFromDB().then(function(users_array){ 
     console.log(users_array); 
    }) 
} 

function pullAllUsersFromDB(){ 
    return new Promise(function(resolve, reject){ 
     rootRef.child('users').on('value', function(snapshot) { 
     var users_object = snapshot.val(); 
     var users_array = Object.keys(users_object).map(function(key) { 
     return users_object[key]; 
     }); 
     resolve(users_array) 
    }); 
    }) 
} 

Answer 1

このコードでは、各繰り返しでinnerHTML値を置き換えます。値の配列を取得するには、次のような何かを行うことができます：

var usersList = []; 
users_array.forEach(function(user){ 
    usersList.push(user.name) 
} 
document.getElementById('displayUsers').innerHTML = usersList.join(' ');