sort list in java scripts

This code creates an HTML page with a ul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    


    <ul id="list">
<script  src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script  src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script  src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
<script  src="https://www.gstatic.com/firebasejs/8.10.1/firebase-storage.js"></script>



<script id="MainScript">
    var firebaseConfig = {
        apiKey: "AIzaSyCNkmUCWLJuOwIumEdV3lvLfkPlLrokxLc",
  authDomain: "a44444444-c1b3f.firebaseapp.com",
  databaseURL: "https://a44444444-c1b3f-default-rtdb.firebaseio.com",
  projectId: "a44444444-c1b3f",
  storageBucket: "a44444444-c1b3f.appspot.com",
  messagingSenderId: "88737669276",
  appId: "1:88737669276:web:88b7db69b45e81a2824d59",
  measurementId: "G-G195J1V2E2"

    };


    firebase.initializeApp(firebaseConfig);
/////////////////////////////////////////////////////




    function addItemToList(postTitel0,postDescription0,postImage0){
        var ul= document.getElementById('list');
        var postTitel = document.createElement('h2');
        var postDescription = document.createElement('li');
      var   postImage = document.createElement('img');
      postImage.src = postImage0;
        postTitel.innerHTML =  'postTitel:'+postTitel0;
        postDescription.innerHTML =  'postDescription:'+postDescription0;
        postImage.innerHTML =  'postDescription:'+postImage0;




ul.appendChild(postTitel);
ul.appendChild(postDescription);
ul.appendChild(postImage);


    }


function fetchAllData(){
    firebase.database().ref('posts').once('value',function(snapshot){

 
snapshot.forEach( function (ChildSnapshot){
let postTitel1 =ChildSnapshot.val().postTitle;
let postDescription1 =ChildSnapshot.val().postDescription;
let postImage1 =ChildSnapshot.val().postImage;


addItemToList(postTitel1, postDescription1,postImage1);
});
    }); };


    fetchAllData();
</script>


    </ul>
<button onclick="fetchAllData()"> Try 2</button>

</body>
</html> how to sort this list descending order

To sort this list in descending order, you can modify the function "addItemToList" to store the posts in an array and sort the array before adding each post to the list. Here's the updated code:
javascript
var postsArray = [];

function addItemToList(postTitel0, postDescription0, postImage0) {
  var ul = document.getElementById('list');
  var postTitel = document.createElement('h2');
  var postDescription = document.createElement('li');
  var postImage = document.createElement('img');
  postImage.src = postImage0;
  postTitel.innerHTML = 'postTitel:' + postTitel0;
  postDescription.innerHTML = 'postDescription:' + postDescription0;
  postImage.innerHTML = 'postDescription:' + postImage0;

  // Store the post in the postsArray
  postsArray.push({
    postTitel: postTitel,
    postDescription: postDescription,
    postImage: postImage
  });

  // Sort the postsArray in descending order
  postsArray.sort(function (a, b) {
    if (a.postTitel.innerHTML < b.postTitel.innerHTML) {
      return 1;
    }
    if (a.postTitel.innerHTML > b.postTitel.innerHTML) {
      return -1;
    }
    return 0;
  });

  // Clear the list
  ul.innerHTML = '';

  // Add each post to the list
  postsArray.forEach(function (post) {
    ul.appendChild(post.postTitel);
    ul.appendChild(post.postDescription);
    ul.appendChild(post.postImage);
  });
}

sort list in java scripts

Comments

Post a Comment