angular js sorting JSON objects by ID

I am having trouble sorting and displaying data with AngularJS. I have added a sort option to my table, but it does not seem to be working properly.

Could you please review my JSON data?

 [
   {
      "id":143,
      "companyName":"XC",
      "dividendIncome":66666666,
      "warrantNo":"777777",
      "taxExempt":0,
      "status":"ACTIVE",
      "periodId":{
         "periodId":4,
         "period":"2020-2021",
         "startDate":"2020-04-01",
         "endDate":"2021-03-31",
         "status":null
      },
      "userId":2,
      "isSpecialCategory":false,
      "isDivDistributByInvestee":false,
      "isDivPaidOutExemptProfits":false,
      "dividendIncomeReceivedDate":"2020-05-12"
   },
   {
      "id":145,
      "companyName":"ghhh",
      "dividendIncome":6700000,
      "warrantNo":"555634",
      "taxExempt":0,
      "status":"ACTIVE",
      "periodId":{
         "periodId":4,
         "period":"2020-2021",
         "startDate":"2020-04-01",
         "endDate":"2021-03-31",
         "status":null
      },
      "userId":2,
      "isSpecialCategory":false,
      "isDivDistributByInvestee":false,
      "isDivPaidOutExemptProfits":false,
      "dividendIncomeReceivedDate":"2020-05-11"
   }
]

I have created an HTML table to display this data, and everything seems to be showing correctly. Here is the 'ng-repeat' section for your reference:

  <tr ng-repeat="dividendIncome in dividendIncomeList | orderBy:'-id'">
                                <td>{{dividendIncome.id}}</td>
                                <td>{{dividendIncome.companyName}}</td>
                                <td>{{dividendIncome.warrantNo}}</td>
                                <td align="right">{{dividendIncome.dividendIncome | number:2}}</td>
                                <td align="right">{{dividendIncome.taxExempt| number:2}}</td>
</tr>

As per my requirements, I need id:145 to be displayed first followed by id:143. Are there any issues in my code? Can you assist me in fixing this problem?

javascriptangularjs

Answer №1

After reviewing your code, I can confirm that it is correct and functioning properly.

Below is an example showcasing the functionality of your code:

function LoginController($scope) {

    $scope.dividendIncomeList = [
   {
      "id":143,
      "companyName":"XC",
      "dividendIncome":66666666,
      "warrantNo":"777777",
      "taxExempt":0,
      "status":"ACTIVE",
      "periodId":{
         "periodId":4,
         "period":"2020-2021",
         "startDate":"2020-04-01",
         "endDate":"2021-03-31",
         "status":null
      },
      "userId":2,
      "isSpecialCategory":false,
      "isDivDistributByInvestee":false,
      "isDivPaidOutExemptProfits":false,
      "dividendIncomeReceivedDate":"2020-05-12"
   },
   {
      "id":145,
      "companyName":"ghhh",
      "dividendIncome":6700000,
      "warrantNo":"555634",
      "taxExempt":0,
      "status":"ACTIVE",
      "periodId":{
         "periodId":4,
         "period":"2020-2021",
         "startDate":"2020-04-01",
         "endDate":"2021-03-31",
         "status":null
      },
      "userId":2,
      "isSpecialCategory":false,
      "isDivDistributByInvestee":false,
      "isDivPaidOutExemptProfits":false,
      "dividendIncomeReceivedDate":"2020-05-11"
   }
];
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>

<div ng-app ng-controller="LoginController">
    <table>
    <tbody>
     <tr ng-repeat="dividendIncome in dividendIncomeList | orderBy:'-id'">
       <td>{{dividendIncome.id}}</td>
       <td>{{dividendIncome.companyName}}</td>
       <td>{{dividendIncome.warrantNo}}</td>
       <td align="right">{{dividendIncome.dividendIncome | number:2}}</td>
       <td align="right">{{dividendIncome.taxExempt| number:2}}</td>
    
</tr> 
</tbody>
</table>
</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

An error has occurred: Unable to access the property "filter" as it is undefined

After deploying my react-app online using npm run build, I encountered an issue where a page on my app displayed an error in Container.js. Despite being unfamiliar with this file and its purpose, I attempted to resolve the issue by reinstalling all node_mo ...

javascriptreactjs

A mistake has been identified: The object could potentially be 'null'. TS2531 for window.document

This is my first time integrating TypeScript into my project. When attempting to access something using window.document.getElementById(), I keep encountering the error: Type error: Object is possibly 'null'. TS2531 I've looked online for ...

javascripttypescripttypescript2.0

AngularJS directives and controller scope

I'm looking to create a custom directive in AngularJS that generates a div element as a title and a ul list below it. The title should be customizable through an attribute, while the list content is controlled by a designated controller. Check out t ...

javascriptangularjsangularjs-directive

Structural engineering for massive webpage

Currently I am in the process of building a large page using AngularJS. As I plan out the architecture for this page, I am debating which approach would be most effective. The page consists of 3 distinct blocks with various functionalities, but the prima ...

javascriptangularjsarchitecturecontroller

using recursion within callback functions

In my JavaScript function with a callback, I am utilizing the "listTables" method of DynamoDB. This method returns only 100 table names initially. If there are more tables, it provides another field called "LastEvaluatedTableName", which can be used in a n ...

javascriptnode.jsrecursionexpress

Can pagination numbers in Jquery DataTable be configured based on the total records returned by the server and the number of records chosen by the user?

I am currently diving into the world of DataTable.js, a jQuery plugin, and working hard to articulate my questions effectively. For my specific needs, I need to retrieve only 10 records initially whenever an AJAX request is made, even if there are 100 rec ...

javascriptjqueryhtmlajaxdatatables

Customizing the JavaScript Calendar in Qualtrics

I came across a JavaScript code snippet that allows you to embed a calendar into a Qualtrics question. Specify a date for the survey: <link href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" rel="stylesheet" type="text/css" /> <script sr ...

javascriptqualtrics

converting a CSV string into a JSON array using AngularJS

My data is in a comma-separated format: "HotelName","Remained","Date" "Maxx","4","Jun 26 2016" "Voyage","3","Jun 24 2016" I am looking to convert this into a JSON array as shown below. How can I achieve this using my JavaScript code? [ { HotelName ...

javascriptjsoncsv

Modifying webpack settings for a create-react-app based project: A step-by-step guide

After starting a new react project with create-react-app, I am looking to update the webpack configuration. However, I cannot seem to locate the webpack file. Should I be creating this file myself, or is there another process involved? As someone who is ...

javascriptreactjswebpackcreate-react-app

Exploring Vue and Nuxt JS: What Causes the Issue of Unable to Create the Property 'display' on the String 'bottom:30px;right:30px;'

this piece of code is designed for a component that allows users to jump back to the top of the page. However, after refreshing the page, it stops working and throws an error. The project uses the Nuxt and Vue framework. Can anyone identify the reason behi ...

javascriptvue.jsvuejs2vue-componentnuxt.js

The HTML video controls in Safari take precedence over the window.name attribute

When using Safari 8.0.5, the controls attribute for the video element will change the value of window.name to "webkitendfullscreen". This is significant because I rely on using window.name to store client-side data in Safari's private mode, where loca ...

javascripthtmlsafari

The functionality of save() is not compatible with mongoose.Schema

const Information = require('./Models/Information'); ... let sampleData = new Information( dataSample ); sampleData.save( function ( error ){ console.log('testing); if ( error ) { console.log('Error occurred while saving Informa ...

javascriptnode.jsmongodbmongoosesave

Deactivate and circumvent Angular routing outside of the specified route URL

I am looking for a way to disable and bypass Angular routing when I have static pages or PHP-rendered views in my hybrid PHP and AngularJS app. Instead of being redirected by Angular's routing, I want to perform a full page reload to the routed link o ...

javascriptphpangularjs

What could be causing the Metamask account address to return as undefined even after it was stored in the useState() function?

A code snippet I have establishes a connection to the Metamask wallet and initializes the account address using useState() hook. const [currentAccount, setCurrentAccount] = useState("") const connectWallet = async () => { try { if (! ...

javascriptreactjs

"Learn how to update an existing table row and populate its cells with JSON data retrieved from a successful AJAX request without creating a

Currently, I am utilizing CouchCMS. The platform offers a feature known as repeatable regions which essentially generates tables to showcase recurring content. The defined repeatable region looks like this: <cms:repeatable name="item_detail" ...

javascriptphpjqueryajaxcouch-cms

Identify HTML elements within a textarea or text input using JavaScript while also accommodating the common special characters ">" and "<"

Is there a way to accurately detect HTML tags in textarea or text input fields before submitting a form? While it may seem straightforward to use regular expressions like /<\/?[^>]*>/gi.test(str) for this purpose, the challenge arises when de ...

javascripthtml

Managing data flow in React and Reflux: Utilizing a single component duplicated in the DOM

Imagine this Tree scenario: <Homepage> <HeaderSection> <Navbar> <ShoppingCartComponent> </Navbar> </HeaderSection> <MainContent> <ShoppingCartComponent> &l ...

javascriptreactjsrefluxjs

Revising Function Templates in Angular's UI Bootstrap Pagination

In my application, I am utilizing Angular UI Bootstrap for pagination. Specifically, I am interested in customizing the functions for First/Last and Previous/Next buttons. My attempt to change the function of the Last button to call "changePage" instead o ...

angularjstemplatespaginationangular-ui-bootstrap

Change the DER encoded ANS.1 format of an AWS KMS ECDSA_SHA_256 Signature to JWT base64url encoded R || S format using NodeJS/Javascript

I am currently working on generating a JWT Signature in NodeJS using the ES256 algorithm and AWS KMS Customer Managed Keys. However, I have encountered an issue where the signature created by AWS KMS with ECDSA_SHA_256 cryptographic Signing Algorithms is ...

javascriptnode.jsjwtamazon-kms

"Utilizing d3 to parse and track variables within JSON data

To calculate the number of occurrences of s1, s2, and s0 in JSON data and use this information to plot a multiline chart with date (path of date is as follows reviews_details>>variable vf of JSON) on the X-axis versus the number of reviews (s1/s0/s2 counts ...

javascriptjsond3.js