Как я могу получить данные из localstorage и просмотреть в таблице, используя javascript, и сделать раскрывающийся список для сортировки таблицы - PullRequest
Новая
       1

Как я могу получить данные из localstorage и просмотреть в таблице, используя javascript, и сделать раскрывающийся список для сортировки таблицы

0 голосов
/ 16 июня 2020

У меня есть следующий код, который должен отображать идентификатор, имя и род занятий. Я могу добавить в локальное хранилище, но мне нужно отобразить его в таблице и отсортировать по имени, идентификатору и профессии. любая идея, как я могу это сделать, используя javascript. пример вывода вывод 

<!DOCTYPE html>
<html>
<title>Sorting Test</title>
<body>
	<fieldset>
		<legend>Add participant<legend>
		<input id="userID" type="text">
		<input id="userName" type="text">
		<input id="userOccupation" type="text">
		<button id="addbtn" type="button" >Add</button>
	</fieldset>
    <br>   
        <div id="displayOutput">           
        </div>        
</body>
<script>
	// get the userid, userName and UserOccupation
	const userID = document.getElementById("userID");
	const userName = document.getElementById("userName");
	const userOccupation = document.getElementById("userOccupation");
	const addbtn = document.getElementById("addbtn");
    const displayOutput = document.getElementById("displayOutput");
	
	//add user input to storage
	addbtn.onclick = function(){
        const id = userID.value;
        const name = userName.value;
        const occupation = userOccupation.value;
        if(id && name && occupation)
        { 
            let myObj = {
                id,
                name,
                occupation
            };
            let myObj_serialized = JSON.stringify(myObj);
            localStorage.setItem("myObj",myObj_serialized);
        }

        
        //view the stored information
        for (let i=0; i < localStorage.length; i++)
            {
                
                
                const key = localStorage.key(i);
                const value =localStorage.getItem(key);
                var row = `<tr><td>${key}: ${value}<td><tr><br/>`;        
                displayOutput.innerHTML += row;
                console.log(value);
                
            }      
	};	
</script>
</html>

1 Ответ

0 голосов
/ 16 июня 2020

Вы переопределяете сохраненные значения элементов каждый раз, когда вызываете setItem. Если вы хотите отобразить таблицу, я предлагаю сохранить массив объектов. Если вы хотите использовать локальное хранилище, сделайте массив Stringify перед сохранением и проанализируйте его, когда вам нужно его прочитать 

var storeData = function(data) {
    localStorage.setItem("tableData",JSON.stringify(data);
}
storeData([]);

var getData = function() {
    return JSON.parse(localStorage.getItem("tableData"));
}

И вызовите что-то вроде этого для сохранения данных: 

storeData(getData().push({id: id, name: name, occupation: occupation});

И затем для отображения данных вы можете: 

var arr = getData();
arr.forEach(element) {
    displayOutput.innerHtml += `
        <tr>
        <td>ID: ${element.id}</td>
        <td>Name: ${element.name}</td>
        <td>Occupation: ${element.occupation}</td>
        </tr>`;
}

Что касается сортировки, вы можете вызвать функцию сортировки в массиве по щелчку заголовка столбца таблицы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...