Ways to organize variables for my specific situation

I need assistance with sorting a list of items alphabetically by name and displaying them on the page. The issue I am facing is that some of the names contain numbers like

var items = [
    {‘name’ : ‘name 1’}, 
    {‘name’ : ‘name 2’}, 
    {‘name’ : ‘name 3’}, 
    …more  
    {‘name’ : ‘name 11’}, 
    {‘name’ : ‘name 12’},
    {‘name’ : ‘name 21’}, 
    {‘name’ : ‘name 22’}
]

Html

<div ng-repeat=“item in items | orderBy: ‘name’”>
   <h3> {{item.name}}</h3>
</div> 

The current output looks like

name 1
name 11
name 12
name 2
name 21
name 22

My desired result is

name 1
name 2
name 3
name 11
name 12
name 21
name 22

If there is a quick solution to achieve this, I would appreciate any help. Thank you!

Answer №1

<div ng-repeat="element in elements | orderBy: 'parseInt(title.split(\' \')[1])'">
     <h3> {{element.title}}</h3>
</div> 

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

Issues arise when attempting to smoothly scroll to an anchor point in a webpage

While working on my website, I have encountered a challenge. The issue arises when dealing with multiple div items. Upon scrolling slightly, the entire page focuses on the div with a height of 100vh, which works perfectly fine. However, my attempts to ...

Error: Attempted to call the 'post' method on an undefined object, resulting in an Uncaught TypeError. This occurred within the Ionic 2 framework while executing the Javascript code located

While I attempt to convey my message in English, unfortunately, it is not a language I am fluent in. Currently, I am working on an Ionic 2 project. In this particular scenario, I am trying to make an HTTP request using the POST method while emulating it o ...

React - Effective Ways to Update State Following an AJAX Call

I'm currently in the process of transitioning one page within my web application from using jQuery and Vanilla JS to utilizing React. However, I'm facing some challenges as React is still relatively new to me. On this particular page, I have an ...

Include additional select fields created through PHP

I have a dropdown menu on my HTML page that is populated by PHP from a MySQL database. echo "<select name='author_id[]' size='1'>"; foreach ($authors as $author) { echo "<option value=$author[id]>$author[ ...

When uploading a file through a C# API, an HTTP response of "Unsupported Media Type" is

I am currently utilizing the oi.file.js directive from https://github.com/tamtakoe/oi.file in conjunction with Angular. This is how my HTML structure looks: <form name="EditOrder" enctype="multipart/form-data"> <input type="file" oi-file="opti ...

Exploring Angular2's ability to interpret directive templates using the ng-container

Recently delving into angular2, I ventured into creating dynamic forms and generating fields by following the guide provided in this URL. The result was as expected. The dynamic form component renders each field one by one using ng-container, like shown b ...

Refresh the html page periodically by utilizing ajax every X seconds

Recently, I came across a post discussing the topic of automatically refreshing an HTML table every few seconds. The post can be found here. Currently, I am working with Rails and I want to achieve a similar functionality. However, I specifically want to ...

JQuery hover effect for dynamically added elements

Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below: $.ajax({ type: 'POST', url: "http://mysite.de ...

Limit the input to a specific format

Currently developing a JavaScript application, but having some confusion with Regular Expressions. The main goal is to allow users to input a specific format of strings in a text area for the application to process accordingly, thus requiring restriction o ...

Each div will display the same image twice when loading the image

I have a grid where images are dynamically loaded with a link to a lightbox. Currently, this is how I am achieving it: $(".selection_thumb").each( function(i) { $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++ ...

Is the Vue "Unchecking" feature not properly deleting data from the array?

I need to update my function to handle the removal of a networkAudience when its corresponding checkbox is unchecked. Currently, the networkAudience is being added to the array when checked, but not removed when unchecked. What changes should I make to en ...

The image file that was uploaded from a React Native iOS application to Azure Blob Storage appears to be corrupted or incomplete as it is not

Struggling to develop a feature in a React Native mobile app where users can upload and crop their profile picture, then store it in Azure blob storage. I encountered difficulty with implementing react-native-fs as many resources recommended it, but I kep ...

Combining both AJAX variables and HTML classes

Having trouble combining two AJAX variables with JQuery and PHP to add to a MySQL database... Here is the code snippet: $.ajax({ url: DIR+"some.php", method: "POST", dataType: "JSON", data: { mobile: mobile.val(), d ...

JavaScript doesn't automatically redirect after receiving a response

Hey there, I'm attempting to implement a redirect upon receiving a response from an ajax request. However, it seems that the windows.href.location doesn't execute the redirect until the PHP background process finishes processing. Check out my cod ...

Determining the Position of the Cursor Within a Div

When a link is clicked, a pop up is displayed. Here is the code for the pop up: <div class='' id="custom-popover"> <div class="arrow"></div> <h3 class="popover-title">Popover left</h3> <div class="pop ...

Navigating with Three.JS FPS controls by moving left and right

Currently, I am working on a demo to check player controls for a FPS game. The camera rotation is controlled by the mouse, and the player can move using W-A-S-D keys. However, I am facing an issue with implementing movement left and right relative to the d ...

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not be ...

failed to establish WebSocket connection: Server responded with an unexpected HTTP status code 404

Has anyone else encountered the error message "Firefox can't establish a connection to the server at ws://localhost:8082/FetchNotification/NewFile.htmlatpendpoint" during websocket handshake? I came across this issue and found some helpful informatio ...

Transferring sound file/blob from user interface to Servlet for storage on server

I am struggling to successfully send our audio file from the UI using the provided code snippet: var url = (window.URL || window.webkitURL).createObjectURL(blob); var link = document.getElementById("save"); link.href = url; link.download = filename || &ap ...

How to make an HTML element draggable without the need for an ID

I am currently working on making dynamically created divs draggable. While I have successfully achieved this with pre-existing div elements as shown below: <div> This can be dragged around, but outputs cannot?! </div> the issue arises when ...