Javascript按子数组ID对数组进行排序

Question

I have an array under bahrein that I would like ordered by the index of each item. My bare code is as shown below.

 var bahrein = [ {id: 1, name: "Josef"}, {id: 3, name: "Billy"}, {id: 0, name: "Jane"}, {id: 2, name: "Mack"} ]; for (i = 0; i < bahrein.length; i++){ document.getElementById("show").innerHTML += "<p>"+bahrein[i].name+"</p>"; } 

 <div id="show"></div> 

I have ids assigned for each item, but I placed them out of order. What I would like to know is how to programatically use the sort() function to list the names on my list in order.

Right now my innerHTML shows the list in the order they are written (ie: Josef , Billy , Jane , and Mack ). I want to show them in the order of their ID (ie: Jane , Josef , Mack , Billy ).

Answer 1

You can use sort() method on your data and then append it to html.

 var bahrein = [{id: 1, name: "Josef"},{id: 3, name: "Billy"},{id: 0, name: "Jane"},{id: 2, name: "Mack"}]; let show = document.getElementById("show") bahrein .sort((a, b) => a.id - b.id) .forEach(e => show.innerHTML += `<p>${e.name}</p>`) 

 <div id="show"></div> 

You could also create string of sorted html and then append it html.

 var bahrein = [{id: 1, name: "Josef"},{id: 3, name: "Billy"},{id: 0, name: "Jane"},{id: 2, name: "Mack"}]; let sorted = bahrein .sort((a, b) => a.id - b.id) .map(e => `<p>${e.name}</p>`) .join('') document.getElementById("show").innerHTML = sorted 

 <div id="show"></div> 

Answer 2

It doesn't answer your question, but you can use "lodash" to do the same.

var bahrein = [
    {id: 1, name: "Josef"},
    {id: 3, name: "Billy"},
    {id: 0, name: "Jane"},
    {id: 2, name: "Mack"}
];

bahrein = _.orderBy(bahrein , ['id'],['asc']);

You can learn more about it here .