Looking for a solution to organize the dynamically generated list items in an HTML page

I am currently working on a movie listing website where all the movies are displayed in sequence based on their #TITLE#. The webpage is generated automatically by the software using a template file. Here is the section of code in the template file that showcases the movies: 

 <!-- Latest additions-->
#LATEST_ADDITIONS_START#
<div class="header">Movie Cover Listings</div>
#LATEST_ADDITIONS_TEMPLATE_START#
<li>
    <a href="movies/#INDEX#.htm">
    <table style="display: inline; border: 0; cellspacing: 1;">
        <tr align="center">
            <td align="center"><img border="0" src="covers/#COVER#.jpg" width="#WIDTH#" height="#HEIGHT#"></td>
        </tr>
        <tr align="center">
            <td width="80" height="100" align="center" valign="top">#TITLE#</td>
        </tr>
    </table>
</a>
</li>
#LATEST_ADDITIONS_TEMPLATE_END#
<div class="link_latest"><tr>#LATEST_ADDITIONS#</tr></div>
#LATEST_ADDITIONS_END#

<!-- All movies -->

This is how the program outputs data from the database using the template file:

<!-- Latest additions-->

<div class="header">Movie Cover Listings</div>

<div class="link_latest"><tr>

<li>
    <a href="movies/2.htm">
    <table style="display: inline; border: 0; cellspacing: 1;">
        <tr align="center">
            <td align="center"><img border="0" src="covers/000002.jpg" width="90" height="135"></td>
        </tr>
        <tr align="center">
            <td width="80" height="100" align="center" valign="top">3 Days to Kill</td>
        </tr>
    </table>
</a>
</li>

<li>
    <a href="movies/1.htm">
    <table style="display: inline; border: 0; cellspacing: 1;">
        <tr align="center">
            <td align="center"><img border="0" src="covers/000001.jpg" width="89" height="135"></td>
        </tr>
        <tr align="center">
            <td width="80" height="100" align="center" valign="top">300: Rise of an Empire 3D</td>
        </tr>
    </table>
</a>
</li>
</tr></div>


<!-- All movies -->

The movies are currently listed in descending order by #INDEX# filename. I would like them to be sorted alphabetically by #TITLE# name instead.

If anyone has any tips on how to achieve this, I would greatly appreciate it.

Thank you for your assistance.

javascripthtmlcss

Answer №1

All the values are retrieved from the backend database and displayed in Descending Order based on the file name.

To display data in order by title name, you can execute the following query:

SELECT * FROM table_name ORDER BY title_name DESC

Answer №2

To optimize the sorting process, it is recommended to utilize the ORDER BY clause on the backend:

SELECT * FROM table_name ORDER BY title

This approach proves to be more efficient compared to executing sorting operations on the frontend. However, considering that the question pertains specifically to frontend technologies:

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Retrieve and prepare list items for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate array with innerHTML of list items
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Perform sorting
  vals.sort();

  // Implement descending order if specified
  if(sortDescending)
    vals.reverse();

  // Update the list content on the webpage
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

//Simple implementation...

sortUnorderedList("ID_OF_LIST");

For further information: How may I sort a list alphabetically using jQuery?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Connecting a dynamically assessed function on the $scope to a service

Within my code, there is a function called make_value_summary that has the capability to generate a generic summary of various fields within the $scope. By applying this function, I am able to create location_summary, which is then linked to the view using ...

javascriptangularjs

The Bootstrap modals seem to be invisible within the Rails application

Currently, I am integrating jquery into the devise views of a sample rails application. My intention is to test it on a sample app before implementing it in a production code. The controller and view for welcome are already set up. The routes.rb file loo ...

javascriptruby-on-rails

Retrieving variables using closures in Node.js

I have been developing thesis software that involves retrieving variables within closures. Below is the code snippet written in node.js: var kepala = express.basicAuth(authentikasi); // authentication for login function authentikasi(user, pass, callback ...

javascriptnode.jsmongodbauthenticationexpress

The copyright (©) symbol is unresponsive to rotation

Why can't I rotate the © character? Am I missing something? .copy { font-size: 12px; font-family: Arial; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); } <span class="copy">&copy; This is not ...

htmlcss

Is it Possible to Remove an Item from an Array in Vue without Explicitly Knowing the Array's

I'm currently working on a feature that involves removing an item from an array when it is clicked. The code I have so far looks like this: <span @click="deleteItem(index)" v-for="(item, index) in customTaxonomies.featured" v-html="item"></s ...

javascriptarraysloopsvue.js

Just diving into JavaScript, what makes jQuery so powerful?

As a newcomer to javascript (although functional programming is no problem for me), I find myself questioning some of the design choices made by jQuery. Is it too late to make changes now, or are they simply too ingrained in the framework? For example, the ...

javascriptjquery

Applying a class change in Vue.js upon mounting

How can I make a button element with a .hover property trigger the hover animation as soon as the page loads? I want to apply a class to the button when the page is mounted and then remove it later. What is the best approach for this? I considered using a ...

javascripthtmlcssvue.jsvuejs2

There seems to be an issue with the React Hooks edit form where it is not selecting the record to edit. Although the currentId is correct

I have a simple CRUD React Hooks app with an ASP.NET Core Web API. The Courses component displays a list, but when I click on a link to edit a particular course, the form shows up with empty fields. Here is the JSX for the Courses component: import React, ...

javascriptreactjsreduxreact-hooks

What could be the reason for this JSON being considered "invalid"?

Despite passing validation on jsonlint, both Firefox and Chrome are rejecting this JSON: { "messages": [ { "subject": "One" }, { "subject": "Two" }, { "subject": "Three" ...

javascriptjsonvalidationsyntax-errorjsonlint

A guide on utilizing multer-sftp for downloading files

I've been working on this code, but after searching online I still haven't found a way to download a file from the remote server. I can successfully upload files to the server, but downloading them is posing a challenge. var storage = sftpStorag ...

javascriptnode.jsexpressbackendmulter

Reiterating the text and determining the length of the string

Currently, the script is capable of calculating the width of the script based on user input and can also determine the width of a string. However, I am facing an issue when attempting to repeat a string entered by the user. For example, if the user input ...

jquerycss

Issues with Node.js routes on the express server aren't functioning as expected

I used to have a node.js express server up and running on my previous server. However, after migrating to a new server, the code seems to have stopped functioning. Let me share the setup of my server: var fs = require('fs'); var express = requi ...

javascriptnode.jsexpressroutesfs

window.onresize = function() { // code here

Here's an example of code I've been working on: $(document).ready(function (e) { adjustSize(); $(window).resize(adjustSize); function adjustSize() { var windowWidth = parseInt($(window).width()); if (windowWidth > ...

javascriptjquery

Storing data with jQuery

Looking to store objects in jQuery for events. Each event will have a date, title, and some text that needs to be stored in an array. Wondering if using a multi-dimensional array would be the best way to go so I can easily iterate through them with a count ...

javascriptjqueryarraysobject

What is the method to designate the initial value of a <select> tag within a React component?

I am working with a basic <select> element that is looping through a set of options: <select onChange={(event) => this.setState({selectedOption: event.target.value }) }> { this.state.options.map(option => <option key={option.label} ...

javascriptreactjsfrontend

Encountering a 404 Not Found error while attempting to reach a Node/Express endpoint from the client side

I've developed a Node.js/Express REST API to be utilized by a frontend React application for an inventory management system intended for a garage sale. When attempting to add a new product, I'm trying to access the POST route http://localhost:300 ...

javascriptnode.jsexpress

Implementing asynchronous code when updating state using React hooks

Here's a scenario I'm dealing with: const [loading, setLoading] = useState(false); ... setLoading(true); doSomething(); // <--- at this point, loading remains false. Since setting state is asynchronous, what would be the best approach to ...

javascriptreactjscallbackreact-hooks

What is causing all three boxes to shift when I'm attempting to move just one of them?

Seeking assistance with a problem I'm encountering. As I work on creating my website, I've run into an issue where trying to move one of the three individual boxes (as shown in the image) causes all three of them to shift together. You can view t ...

htmlcsswebmargin

Having trouble populating and submitting a selected option from a dropdown menu in Angular?

Upon loading the page, the Category dropdown automatically populates with data from the database. However, when I attempt to select a value from the dropdown and click a button to post the data to a specified URL, an error occurs: ERROR Error: Error tryin ...

javascripthtmlangulartwitter-bootstrap

verified firebase/firestore requests

I've been struggling with the process of sending authenticated firebase/firestore calls. I set up firestore in my web app using Next.js as shown below: import { initializeApp } from "firebase/app"; import { getFirestore } from 'firebase ...

javascriptfirebasegoogle-cloud-firestorenext.js