로컬 저장소 점수를 오름차순으로 정렬

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

몇 가지 구현에 잘못을 만들었습니다.