How to arrange the output in alphabetical order in javascript?-CodePudding

I need help as soon as possible. I try have tried various way on how to arrange the output in alphabetical order but none of them seems work. The question is asked to arrange the output in alphabetical order without changing the base code.

The base code:

function add() {
  var name = document.getElementById("id-name").value;
  var address = document.getElementById("id-address").value;
  var content = document.getElementById("id-content").innerHTML;
  document.getElementById("id-content").innerHTML = content   name   "<br/>"   address   "<hr/>";
}

Name: <input type="text" id="id-name" name="name"><br /> Address: <textarea id="id-address" name="address"></textarea><br />
<button id="id-send" onclick="javascript: add();">Send</button>
<hr>
<div id="id-content"></div>

This is the example of the output that it should display:

CodePudding user response：

You could create an array and sort it

I wrapped in a form to have simpler event handling. Also no need for javascript: label on an inline event handler

const list = []; // you can get this from localStorage if you want to save across reloads
window.addEventListener("DOMContentLoaded", () => {
  const content = document.getElementById("id-content"),
    nameField = document.getElementById("id-name"),
    addressField = document.getElementById("id-address");
  const show = () => {
    list.sort((a, b) => a.name.localeCompare(b.name))
    content.innerHTML = list.map(({ name, address }) => `${name}<br/>${address}`).join("<hr/>");
  };

  document.getElementById("myForm").addEventListener("submit", e => {
    e.preventDefault();
    const name = nameField.value;
    const address = addressField.value;
    list.push({ name, address });
    show();
  });
});

<form id="myForm">
  Name: <input type="text" id="id-name" name="name"><br /> Address: <textarea id="id-address" name="address"></textarea><br />
  <button id="id-send">Send</button>
</form>
<hr>

<div id="id-content"></div>

CodePudding user response：

You could keep an array of submitted data and sort the array alpabetically. This solution should work:

      let listOfData = [];
      function add() {
        var name = document.getElementById("id-name").value;

        var address = document.getElementById("id-address").value;

        var content = document.getElementById("id-content").innerHTML;
        listOfData.push({
          personName: name,
          personAddress: address
        });

        document.getElementById("id-content").innerHTML = "";

        listOfData.sort((a, b) => a.personName.localeCompare(b.personName));
        for (let person of listOfData) {
          document.getElementById(
            "id-content"
          ).innerHTML  = `${person.personName} <br/> ${person.personAddress}<br/> <hr/>`;
        }
      }

CodePudding user response：

Use this code it will work

function add() {
  var name = document.getElementById("id-name").value;
  var address = document.getElementById("id-address").value;
  let data = document.getElementById("id-content");
  let content = data.innerHTML;

  content = content   name   "<br/>"   address   "<hr>";
  
  let dt = "";
  
  let sortArr = content.split("<hr>").sort().join().split(",");
  
  for (let i = 1; i < sortArr.length; i  ) {
    dt  = sortArr[i]   "<hr>";
  }

  data.innerHTML = dt;
}