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

Vue.js - computed property not rendering in repeated list

It seems like the issue lies in the timing rather than being related to asynchronous operations. I'm currently iterating through an object and displaying a list of items. One of the values requires calculation using a method. While the direct values ...

Vite deciding to generate its own node_modules directory within the workspace rather than depending on a monorepo

I have organized a monorepo for a fullstack webapp with the directory structure outlined below: . ├── client │ ├── index.html │ ├── package.json │ ├── src │ └── vite.config.ts ├── node_modules ├── p ...

Is there a way to export static HTML from Next.js to different directories at once?

My Next.js website is static with 1 million pages, but I am facing an issue where all the exported pages are stored in the same folder, requiring a lot of RAM to access files. Is there a way to export pages into multiple folders, maybe grouping 100k pages ...

Steps to release a react application as an npm package

Hey there! I have a set of JavaScript files named auth.js, cookies.js, hooks.js, product.js, and index.js. My plan is to package them using npm for publishing. In my index.js file, I am exporting all the other files with the syntax: export * from './ ...

Even after setting the handler to return false, Angular continues to submit the form

In the following scenario, I have encountered an issue: Here is the HTML template snippet: <form [action]='endpoint' method="post" target="my_iframe" #confirmForm (ngSubmit)="submitConfirmation()"> <button type="submit" (click)="conf ...

Traversing a hierarchical structure and building a REACT user interface based on it

Currently, I am tasked with a project that involves working with a hierarchy tree. The goal is to loop through the data provided by the tree and create a user-friendly UI representation of the hierarchy for seamless navigation. Here's an illustration ...

Issue with Google Finance JSON response not functioning as expected in Chrome and Firefox browsers, yet appears to be working properly in

I am currently working on a JavaScript project that involves fetching STOCK data from the Google Finance API. When I manually paste the link into my browser, I can successfully retrieve the JSON response: // [ { "id": "22144" ,"t" : "AAPL" ,"e" : "NASDAQ ...

jQuery Animation Issue: SlideDown Effect Not Working as Expected

I'm feeling quite confused about this situation. I've been attempting to utilize the slideDown function in jQuery, but when I click on the 'information' div, it just jumps instead of animating smoothly. I suspect that one of the cause ...

Leveraging AJAX for fetching files on the identical server

Just starting out with HTML and AJAX programming, so let's give it a shot: I've developed a website that populates a table with content from an external txt file (content.txt). The text file is hosted on a Windows 2003 webserver in the C:\I ...

Assigning an array of objects within an AJAX request

I have a MediaObject object that includes: a Media object an array and a function called getMedia() When attempting to create a Media object and push it into the array inside the getMedia function after making an AJAX call, I encountered issues referenc ...

What is the key element missing from my code while attempting to integrate Threejs into React?

I recently undertook the task of converting a project from vanilla Three.js to React. For reference, here is the original project: https://codepen.io/Mamboleoo/pen/rNmRqeK And here is the code I have been working on: You can view the code in CodeSandbox ...

WebWorker - Error in fetching data from server using Ajax call

I've been experimenting with making AJAX calls to an ajax.htm file using web workers. The goal is to have the data continuously updated at set intervals. Although I'm not seeing any errors and the GET request appears to be successful, the data i ...

Tips for acquiring the initial fully visible item within a scrollable element with horizontal alignment through jQuery

I'm trying to use jQuery to find the first visible element inside a scrollable DIV, but I can't quite get it to work correctly. Can someone please help me identify what's causing the issue? $('div').on('scroll', functio ...

I need to know how to create a patch request in Vue.js and simultaneously modify the marks input for specific individuals by using v-model

Hello there, I am currently developing a student assessment input form using vuejs, express, and mongoDB. The backend API is complete and functioning properly when tested with postman. Here is the code: // UPDATE MARKS router.patch('/:studentId' ...

Obtaining JSON information within the AngularJS Scope

I am delving into the world of AngularJS for the first time and trying to understand it by following this example: http://jsfiddle.net/SAWsA/11/ After successfully acquiring data in JSON format, I encountered no issues. Here is a snippet of the JSON data: ...

I'm feeling a bit lost with this JSON example - specifically with JSON.parse, JSON.stringify, as well as localStorage.setItem

As a beginner in learning JSON, I find that W3schools does not provide clear explanations of what each line of code does. While I can interpret some parts, there are sections that still remain unclear to me. // Data storage process: 1. myObj = {name: "Jo ...

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

My page contains dynamic HTML content that I want to incorporate. The dynamic content consists of only HTML and CSS, without any JavaScript. However, I have some custom global CSS styles and JS logic that need to be implemented along with this dynamic con ...

Unable to display menu content text using jQuery

Currently experimenting with jQuery to create a dynamic submenu. The goal is to have a sub menu appear when the main menu is clicked, and then disappear when an item in the sub menu is selected, revealing additional information within a div. Unfortunately, ...

Displaying queries using ajax in Rails

Can someone assist me in dealing with a particular issue? I am using ajax to refresh queries from the database dynamically each time there is a change in a search form. The main objective is to load N number of records based on the parameters selected in ...

Activate ajax search in select2 by hand

I recently integrated the select2 plugin with jQuery into my website. For the most part, it functions perfectly. One particular feature I have is a search widget that utilizes select2 and remote data search. When I enter a search query using a keyboard ...