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

Can you make two columns in CSS that are left floated and maintain their original order?

While the title may not provide much clarity, I am struggling to put into words exactly what I am trying to achieve. I have created a layout in Photoshop which I have shared below to help illustrate my goal. Essentially, I have a blog that displays my sto ...

javascripthtmlcss

Exploring a JSON file to generate a customized array for implementing autocomplete functionality in jQuery

I'm currently working on developing an autocomplete feature for a search bar that will display names of places in Norway. The data is being fetched from a REST API URL provided by a third party. As an example, when the input is "st" there are two res ...

javascriptjqueryjsonrestautocomplete

Conceal the cursor within a NodeJS blessed application

I am struggling to hide the cursor in my app. I have attempted various methods like: cursor: { color: "black", blink: false, artificial: true, }, I even tried using the following code inside the screen object, but it didn't work: v ...

javascriptnode.jsblessed

When a React page is re-rendered using useEffect, it automatically scrolls back to the

Every time I utilize the <Tabs> component, the onChange method triggers the handleTabChange function. This leads to the component being called again and after repainting, the useEffect is triggered causing the page to scroll back to the top. How can ...

javascriptreactjstabsmaterial-uireact-hooks

How do I retrieve and pass values from multiple inputs in my React application?

I've implemented the <autocomplete> as an input field, and I'm currently troubleshooting my submit method by logging values to the console. Unfortunately, I can only submit empty data to my axios instance without any Traceback errors for gu ...

javascriptreactjsmaterial-uireact-hook-form

What's the deal with this route being a 404 error?

I'm currently working on incorporating a new route into Express, specifically for handling 404 errors. Despite my efforts to configure the route in a similar manner to others, I am encountering some difficulties. var repomapRouter = require('./ ...

javascriptnode.jsexpressrouter

The combination of Masonry, FlexSlider, and endless scrolling functionality creates a

I am currently using the Masonry layout and implementing infinite scroll functionality through a jQuery plugin. Within this content, I have various FlexSlider slideshows. Unfortunately, when I trigger the infinite scroll feature, the slider does not displa ...

javascriptjqueryslideshowinfinite-scroll

What is the best way to remove headers and footers programmatically in print pages on Safari using JavaScript?

Struggling with eliminating the header and footer on print pages in Safari using JavaScript? While disabling the header and footer manually can be done through print settings in most browsers, my aim is to automate this process with code to ensure that use ...

javascriptcsssafari

Upgrading to Angular 2: Utilizing ElementRef in ES5

Currently, I am facing a challenge in creating an Attribute directive for Angular 2 that would allow me to set multiple default HTML attributes using a single custom attribute. My intention is to apply this directive specifically to the input element. Howe ...

javascriptangular

Tips for ensuring text remains within a div container and wraps to the next line when reaching the edge

Currently, I am working on a flash card application using Angular. Users can input text in a text box, and the text will be displayed on a flash card below it. However, I have encountered an issue where if the user types a lot of text, it overflows and mov ...

javascripthtmlcssangularjs

Why is the Get request for fetching data not returning multiple parameters, but only returning a single one in Vuex?

I am trying to fetch and visualize a list of data with a GET request while passing two parameters. However, I am encountering an error 400 when passing both parameters, but it works fine when passing just one. Link to code This is the non-working code: a ...

javascriptvue.jsvuexfetch-api

Issue with $sce.trustAsResourceUrl(url) function in angularJS

Having trouble with loading a file into an iframe. Here is the code for the iframe: <iframe width="100%" height="800px" scrolling="no" ng-src="{{someUrl}}"></iframe> In the controller, I am trying to: $scope.someUrl = $sce.trustAsResourceUr ...

javascriptangularjsiframe

ng-Pattern in AngularJS

Enter a number as your username in the field below: <fieldset class="col-sm-12 col-xs-12 text-center"> <label for="username">Username</label> <input type="text" id="username" ng-pattern="/^[0-9]*$/" ...

htmlangularjs

Ways to implement a scrollable v-list component using Vuetify

I have set up a v-list using flex layout, where the v-list expands to fill the remaining space horizontally in a column. However, if the list contains many elements with a total height that exceeds the column's height, the list ends up sticking out of ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Navigating different views in Angular with various layouts

Is there a way to implement different layouts for my backend? At the moment, I have three layouts - one for admin, one for user, and one for teacher, which are named adminLayout.html, userlayout.html, and teacherLayout.html for dashboards. This is how I ...

angularjsexpressangularjs-routing

Combining an if-statement with an HTML button within a single function in JavaScript

I'm currently developing an HTML table that includes fields that must be filled, but I want to allow one of the fields to be optional. The structure of my code is as follows: name.html ... <table> <tr> <td>Number 1:</td& ...

javascripthtmlradio-buttonundefinednan

A step-by-step guide on enabling Autoclick for every button on a webpage

I am currently using Jquery and Ajax to carry out an action, my goal is for a code to automatically click on every button once the page has finished loading. Although I attempted to use the following javascript code to achieve this at the end of my page, ...

javascriptjqueryhtmlajax

Dealing with $http errors: differentiating between user being offline and other error types

I have a straightforward contact form that Angular submits via AJAX to my application on Google App Engine. (A POST handler uses the send_mail function to email the website owner). Here is the client-side code snippet: $http.post('', jQuery.para ...

ajaxangularjsgoogle-app-engine

Dynamic count down using JavaScript or jQuery

I am looking for a way to create a countdown timer that I can adjust the time interval for in my database. Basically, I have a timestamp in my database table that might change, and I want to check it every 30 seconds and update my countdown accordingly. H ...

javascriptphpjquerylive

Error in NodeJs: ReferenceError - the variable I created is not defined

Encountering an issue while attempting to use a module in my router file. I have successfully required it, but now I am seeing the following error message: ReferenceError: USERS is not defined at c:\work\nodejs\router\main.js:32 ...

javascriptnode.jsexpress