ローカルストレージスコアを昇順に並べる

Question

テーブルのデータを昇順にしたいので、スコアが最も高い人がテーブルの一番上になり、スコアが最も低い人がテーブルの下部にあります。私は配列を作成し、データを注文するためにforループを使用しましたが、テーブルに何も表示されません。

/* Register */ 
function storeUserDetail() { 
    const fNameInput = document.getElementById("firstNameInput").value; 
    const lNameInput = document.getElementById("lastNameInput").value; 
    const uNameInput = document.getElementById("userNameInput").value; 
    const pWordInput = document.getElementById("passWordInput").value; 
    const yourScoreInput = document.getElementById("scoreInput").value; 

    const storeDetails = { 
    firstName: fNameInput, 
    lastName: lNameInput, 
    username: uNameInput, 
    password: pWordInput, 
    score: yourScoreInput 
    }; 

    const username = storeDetails.username; 

    // save details to localStorage using username as key 
    localStorage[username] = JSON.stringify(storeDetails); 
} 

/* Log In */ 
function loginUser() { 
    const username = document.getElementById("uNameInput").value; 
    const password = document.getElementById("pWordInput").value; 
    const storeDetails = JSON.parse(localStorage[username]); 

    storeDetails.username = document.getElementById("uNameInput").value; 
    storeDetails.password = document.getElementById("pWordInput").value; 

    localStorage.loggedInUser = username; 
} 

const data = []; 

const getData = key => { 
    return JSON.parse(localStorage[key]); 
}; 

/* Rank Table */ 
function displayTable() { 
    let tableBody = ''; 
    const tableHeader = 
    "<tr><th>First Name</th><th>Last Name</th><th>Score</th></tr>\n"; 

    for (let key in localStorage) { 
    if (key !== "loggedInUser") { 
     data.push(getData(key)); 
    } 
    } 

    for (let user of data) { 
    if (tableBody) { 
     tableBody += 
     `<tr><td> 
     ${user.firstName} 
     </td><td> 
     ${user.lastName} 
     </td><td> 
     ${user.score} 
     </td></tr>`; 
    } else { 
     tableBody = 
     `<tr><td> 
     ${user.firstName} 
     </td><td> 
     ${user.lastName} 
     </td><td> 
     ${user.score} 
     </td></tr>`; 
    } 
    } 

    document.getElementById("rankTable").innerHTML = ""; 
    document.getElementById("rankTable").innerHTML = tableHeader + tableBody; 
} 

あなたは完全なソースhereを表示することができます：私は親切に私はあなたのコードへの変更については、以下を参照してくださいJSFiddle Here

/* Rank Table */ 
function displayTable() { 
    var data = []; 
    data = {firstName: data.FirstName, lastName: data.LastName, topScore: data.Score}; 
    var getData = function(key){return JSON.parse(localStorage[key]);} 
    var highScoreTable = "<tr><th>First Name</th><th>Last Name</th><th>Score</th></tr>\n"; 
    for (var key in localStorage) { 
     if (key !== 'loggedInUser') { 
      data = getData(key); 
      for (var i = 0; i < data.length; i++) { 
       highScoreTable += "<tr><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>" + data[i].topScore + "</td></tr>"; 
      } 
     } 
    } 
    document.getElementById('rankTable').innerHTML = highScoreTable; 
} 

Answer 1

いくつかは、あなたの実装で間違っているを作成しました。