CODEWITHSUNDEEP
javascripthtml
Azrul Naim
Azrul Naim

Reputation: 1

How to arrange the output in alphabetical order in javascript?

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:

Upvotes: 0

Views: 130

Answers (3)

SHAYAK
SHAYAK

Reputation: 153

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;
}

Upvotes: 0

Jarne
Jarne

Reputation: 129

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/>`;
        }
      }

Upvotes: 1

mplungjan
mplungjan

Reputation: 178151

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>

Upvotes: 1

Related Questions