Sort a JSON array alphabetically in Angular.js even when there are no key/value pairs specified

I'm having trouble alphabetizing a list using a JSON array in my code. Despite my efforts, the sorting doesn't seem to be working correctly. You can view my current code by following this link to the jsfiddle http://jsfiddle.net/hxxLaxL3/

Here is an overview of HTML part:

<div ng-app>
  <div ng-controller="Ctrl">
    <li ng-repeat="f in friends | orderBy:'f'">{{f}}</li>      
  </div>
</div>

In Angular part:

function Ctrl($scope) {
  $scope.friends =
      ['C',
      'B',
      'Z',
      'S'];
}

Current Output:

  • C
  • B
  • Z
  • S

Expected Output:

  • B
  • C
  • S
  • Z

Answer №1

Swap orderBy:'f' with orderBy:'toString()'

    <div ng-app>
      <div ng-controller="Ctrl">
        <li ng-repeat="f in friends | orderBy:'toString()'">{{f}}</li>      
      </div>
    </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

Concurrent HTTP Requests - AngularJS

My directive, known as machineForm, includes a dataService: dataService.getMachineTaxesById($scope.machineId).then(function (response) { $scope.machine.machineTaxes = response.data; }); I am using this directive twice simultaneously. <div class= ...

Multiplying array elements within the Vuex state with the assistance of Socket.io

I have developed an application using Vue and Vuex that connects to a Node/Express backend with Socket.IO to instantly push data from the server to the client when necessary. The data sent to the clients is in the form of objects, which are then stored in ...

Printing in Firefox is ineffective, but functions smoothly in alternative browsers

I'm currently working on customizing some content specifically for printing, so I've implemented a hook import { useState } from 'react' const usePrint = () => { const [isPrinting, setIsPrinting] = useState(false) const hand ...

Dealing with models in Vue.js is proving to be quite a challenge

Why isn't myGame showing as 超級馬力歐 initially and changing when the button is pressed? It just displays {{myGame}} instead. I'm not sure how to fix it, thank you! let myApp = new vue({ el:'myApp', data:{ myGame:&a ...

The jQuery script designed to verify the page height doesn't appear to be functioning as intended

Below is a snippet of jQuery code that I'm working with: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> hasVBar=""; hasHBar=""; $(docume ...

What is the typical response time for a request using javascript axios?

In my current application, I am fetching data from an API and everything is functioning correctly. However, I am interested in determining the duration of each request in milliseconds. To achieve this, I implemented interceptors using axios. The challenge ...

Determining if the current URL in NextJS is the homepage

Just getting started with NextJS. I am trying to determine if the current URL is the home page. When I use: import { useRouter } from "next/router"; const router = useRouter(); const is_home = (router.pathname === ''); An error pops ...

Is there a way to find keys with matching values within a dictionary?

In my dictionary, I have two sets of identical array values for different keys. My query is: How can I determine which keys have the same value based on inputting just one value? I want to retrieve all keys that share the same values as an output. This i ...

Encountered an error when attempting to access property 'connect' of an undefined value

I encountered an issue with pg.connect not being defined in the Handler module. My goal is to set up a table using postgres in fastify. In my routes handling folder, I manage the routes and send API requests. The error occurs when I navigate to http://loc ...

Tips on recycling JavaScript files for a node.js API

I'm currently using a collection of JS files for a node.js server-side API. Here are the files: CommonHandler.js Lib1.js Lib2.js Lib3.js Now, I want to reuse these JS files within an ASP.NET application. What's the best way to bundle these f ...

Sharing functions between Angular components

Check out my problem statement: https://stackblitz.com/edit/angular-jk8dsj I'm facing two challenges with this assignment: I need to dynamically add elements in the app.component when clicking a button in the key-value.component. I've tried ...

"Is there a way to extract a specific value from an XML file based on another element

<dataset> <study recNO="0" seriesRecCount="1"> <patientID>123456</patientID> <accessionNumber>M120170428105320</accessionNumber> <patientIDID>35</patientIDID> <studyUID>2.25.1439 ...

Can Sequelize be used to perform queries based on associations?

I have designed a data structure that includes an n:m relationship between "Rooms" and "Users." My current goal is to remove or delete a room. To accomplish this, I need to verify if the user initiating the deletion process is actually present in the room ...

Tips for identifying HTML tags that include a specific attribute automatically

Is there a way to automatically identify an HTML tag that contains a specific attribute like data-wow-delay? This query revolves around wow.js. The goal is to have the classes wow bounce added automatically to any HTML tag that has this particular attribu ...

MUI React - Issue with changing SvgIcon color using override

Currently, I am utilizing MUI version 5 within a React project. My objective is to customize the icon color for the Error Alert by using General StylesOverrides. Although I successfully altered the color on the Alert component, I am unable to discover a ...

Looking to enhance code by using jQuery to substitute numerous href elements. Only seeking enhancements in code quality

I am currently using regular JavaScript to change the href of 3 a-tags, but I want to switch to jQuery for this task. var catNav = $('ul.nav'), newLink = ['new1/','new2','nwe3/']; catNav.attr('id','n ...

AFrame: keeping an element's world position and rotation intact while reparenting

I am attempting to reassign a child element (entity) to another parent while preserving its position, rotation, and possibly size in the scene. Ideally, I would like to implement a component (let's call it "reparent") that can be added to an entity to ...

Attempting to extract data from a JSON object within a multidimensional array

Looking at the JSON structure that I need to work with: [ { "result":"OK", "message":"Display", "value":200, "rows":29 } , [ { "personID":1, "img_path":"/1234/", "img ...

What methods can be used to determine if a webm file contains audio or video content?

In the process of creating an uploader using ReactJS, I encounter an issue related to identifying whether uploaded files are video or audio. Specifically, when users upload audio files with a .webm extension (e.g., music.webm) and the MIME type is set as & ...

Share on iOS using $cordovaSocialSharing

After implementing the ngcordova plugin social sharing, I encountered an issue where everything worked fine on Android but on iOS, the title (subject) was not appearing. function shareEventDetail() { $ionicPlatform.ready( function () { ...