need to sort the table name by alphabetical and camera by numerical

Question

as i am using a local storge to get the details and store the values

let tempHolder = localStorage.getItem("mobiles") || mobiles;

here is code for reference
https://code.sololearn.com/W5Is5XeC26Y6

now i need to sort the table name in alpha and camera in numerical but i cant figure how to do since i get the data from the local storage

function displayTable(mobo) {
cleanstorage();
var table = document.getElementById("mobo");
var row = document.createElement("tr");
var properties = ["name", "brand", "camera", "processor", "premium"];
for (var j = 0; j < properties.length; ++j) {
var cell = document.createElement("th");
cell.innerHTML = properties[j];
row.appendChild(cell);
}

table.appendChild(row);
for (var i = 0; i < mobo.length; ++i) {
var mobo1 = mobo[i];
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.innerHTML = mobo1.name;
row.appendChild(cell);
var cell2 = document.createElement("td");
cell2.innerHTML = mobo1.brand;
row.appendChild(cell2);
var cell3 = document.createElement("td");
cell3.innerHTML = mobo1.camera;
row.appendChild(cell3);
var cell4 = document.createElement("td");
cell4.innerHTML = mobo1.processor;
row.appendChild(cell4);
table.appendChild(row);
var cell5 = document.createElement("td");
if (mobo1.brand == "iPhone" || mobo1.brand == "Samsung") {
cell5.innerHTML = "yes";
} else {
cell5.innerHTML = "no";
}

row.appendChild(cell5);
table.appendChild(row);
}

Answer 1

Snippet was cutted. Better use a codebit to share your attempt

Answer 2

i have attached the code @david Ordas

Answer 3

officially for learning first of all... storages only accept strings so you need encode and decode json

localStorage.setItem("key", JSON.stringify(myvar))
myvar = JSON.parse(localStorage.getItem("key"))

If you need some special format at object provide in it a method/Symbol toJSON

Answer 4

i can't get it clearly can u fix it if i provide you code in jsfiddle

Answer 5

Take a look as reference at this other example

https://code.sololearn.com/WPYbL84mmffj/?ref=app

Answer 6

Of course

On both event listeners
☞ First sort your array in a tempvar

arr = [...mobiles].sort(...)

☞ and then clean html and render again

How to handle without repeating code? Eg. Use data attributes

<button data-sort-property="name" onclick="sortTable(this)" ...
<button data-sort-property="camera" onclick="sortTable(this)" ...

const field = this.dataset.sortProperty;
const sortedData = [... mobiles].sort(sorter(field))
render(sortedData);

function sorter(field) {
return (a, b) => a[field] > b[field];
}

Answer 7

@david ordas I tried it but show kind of error in the code can u fix it and sent me code bit as a request