Transform strings in a table into integers within a specified scope

My World.json file is quite large and contains extensive data on countries worldwide. I've been utilizing a list to display this data in a table format, with the intention of sorting all values accordingly. However, I have encountered an issue - all my integer values are formatted as strings within world.json. While I understand that I need to use parseInt to resolve this problem, I have attempted various methods without success.

Here's a snippet of code from World.js:

"Country": [
{
  "Code": "AFG",
  "Name": "Afghanistan",
  "Continent": "Asia",
  "Region": "Southern and Central Asia",
  "SurfaceArea": "652090.00",
  "IndepYear": "1919",
  "Population": "22720000",
  "LifeExpectancy": "45.9",
  "GNP": "5976.00",
  "GNPOld": "NULL",
  "LocalName": "Afganistan/Afqanestan",
  "GovernmentForm": "Islamic Emirate",
  "HeadOfState": "Mohammad Omar",
  "Capital": "1",
  "Code2": "AF"
},
{

controller.js

countryApp.controller('ctrlMain', function($scope, $http) {
  $http.get('world.json').success(function(data){
    $scope.world = data;
  });

});

countryApp.controller('detailsCtrl', function($scope, $routeParams){
$scope.name = $routeParams.countryName;
});

all.html

<td class="heading"><a href="" ng-click="reverse = predicate == 'LifeExpectancy' && !reverse; predicate = 'LifeExpectancy'">Befolkningsm&aumlngd</a></td>

<tr ng-repeat="country in world.Country | filter: { Continent: vDel } | filter:search | orderBy: predicate:reverse">
  <td>{{ country.Population }}</td>
</tr>

Answer №1

If you're looking to achieve a certain task, there are several methods you can try. One effective way is to make changes to your JSON data on the server side. However, if that's not possible, you can implement the following update in your ng-repeat loop.

<tr ng-repeat="country in world.Country | filter:search | orderBy:'Population*1':reverse">
  <td>{{ country.Population | number}}</td>
</tr>

I have created a plunker demonstration showcasing this solution with the orderBy function.

http://plnkr.co/edit/ocD0TskHAqULHUddDPku?p=preview

Note: The plunker has been updated to ensure the reverse functionality works correctly.

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

What is the best way to eliminate the bottom border of an input field?

Seeking advice on how to eliminate the border-bottom of an input field when typing starts. .car-list-input { font-family: 'Source Sans Pro', sans-serif; border-radius: 3px; font-size: 14px; font-weight: 400 !important; height: 35px; ...

"Creating a custom comparator in Angular for sorting objects based on their keys

I am embarking on the challenge of designing a directive that will generate a dynamic table complete with front-end pagination and search functionality. It has become clear to me that in order for the search feature to work effectively, I must implement a ...

Vuefire encountering an issue with Vue 3 and throwing a Vue.use error

After setting up a Vue app and importing Vue from the vue module, I encountered an issue: ERROR in src/main.ts:4:5 TS2339: Property 'use' does not exist on type 'typeof import("/data/data/com.termux/files/home/ishankbg.tech/node_modules/vue/ ...

What could be causing scope.$watch to not function properly?

Take a look at this Fiddle: http://jsfiddle.net/sDnN5/ scope.$watch('points', function (value) { scope.console.push('scope.$watch'); }); It seems like the code above is not triggering when $scope.points change $scope.points.push ...

Commitment of service within AngularJS controller using the "as" syntax

I'm experiencing an issue with the code snippet below. I prefer using the controller as syntax and assigning data to 'this' instead of $scope. The problem is that in this scenario, when using $scope.user everything works fine, but when tryin ...

Unusual behavior involving the selection of $stateParams

Seeking a solution for updating angular-ui route parameters based on select field changes. Issue: The route successfully updates with the selected parameter, but the select field does not reflect the change in option selection. Check out the Plunkr. Clic ...

What is the best way to display images one by one from a map using a random fade effect?

I am in the process of creating a logo wall for a website. I successfully managed to display them randomly using a map, but now I want to make them appear one by one in a random order (for example: image 1, image 6, image 3, ...) and keep them visible once ...

Assign a specific attribute to a checkbox, gather all selected attributes, and transmit them using jQuery

I have a system generated table with approximately 800 rows that needs checkboxes added for users to select specific rows for more information. I can add a checkbox column to the entire table at once, but I don't want to manually assign values to each ...

Gutenberg NPM remains in its original state without any alterations

I experienced some issues with the NPM when making changes in blocks or other elements as the changes were not working properly. Below is my gutenberg.php file: function MyBlocks() { wp_register_script('blocks-js', get_template_directory_ ...

Creating a table with a static first column and vertical text positioned to the left of the fixed column

To create a table with the first column fixed, refer to this fiddle link: http://jsfiddle.net/Yw679/6/. You also need a vertical text to be positioned to the left of the fixed column in a way that it remains fixed like the first column. The disparities be ...

How can I create a Material ui Card with a border-less design?

After reviewing the information provided, I noticed that you can set the option to have it as variant="outlined" or raised However, I am curious if there is a method to create the card without any visible borders at all? ...

In JavaScript, when you update the property of a nested object within an array, the changes will also be applied to the same property for

Encountered an interesting issue in my code where updating a single property of a nested object within an array of objects results in all similar objects having the same property updated. Snippet of the Code: let financials = { qr: { controlData: [ ...

Discover elements within an array that have been modified

When working with AngularJS, I am faced with the challenge of only sending back the items that have changed from an array loaded via an AJAX request. It seems difficult to extract just the modified items without sending the entire array again. Initially, I ...

The `res.send()` function is showing [object object] and I am unable to access any properties

I've just started learning about REST APIs with express. I am encountering a strange issue where the code successfully console logs { name: 'Test', id: 1 } for the user, but when I send the response, it displays [Object object]. Additionally ...

Determine if a MySQL query in node.js returns no results

I'm trying to determine if there are no matching results in MySQL using Node.js. How can I achieve this? mysql.query("select * from table1 where name = 'abcd'", function(error, result, field) { if(error) { handleNoError(error); ...

What is the best way to organize a table with multiple state variables using nested loops?

What is the best way to display multiple variables in a table using a loop, such as i,j,k? this.state = { materials: ['m1', 'm2'], quantity: ['2', '4'], unitPrice : ['12&apo ...

There are critical vulnerabilities in preact-cli, and trying to run npm audit fix leads to a never-ending loop between versions 3.0.5 and 2.2.1

Currently in the process of setting up a preact project using preact-cli: npx --version # 7.4.0 npx preact-cli create typescript frontend Upon completion, the following information is provided: ... added 1947 packages, and audited 1948 packages in 31s 12 ...

Is there a way to display various data with an onClick event without overwriting the existing render?

In the process of developing a text-based RPG using React/Context API/UseReducer, I wanted to hone my skills with useState in order to showcase objects from an onclick event. So far, I've succeeded in displaying an object from an array based on button ...

Is there a way to make a selected option stay selected in vue.js 2?

Here is the structure of my Vue component : <template> <select class="form-control" v-model="selected" :required @change="changeLocation"> <option :selected>Choose Province</option> <option v-for="option in o ...

What is the correct process for authenticating requests from SSR to the Feathers JS API?

There are some examples available on how to access FeathersJS API from SSR, but the important aspect of authorizing such requests is missing. Is it feasible to create a feathers-client app for each request? Wouldn't that put too much load on the syste ...