What is the best way to organize JSON files data in a specific sequence?

I successfully converted 3 JSON files into an HTML page using AngularJS. Here is the code I used:

Factory code

app.factory('myapp', ['$http', function($http) {        
function getLists() {
    var tab = ['url1', 'url2', 'url3'];
    var list = [];
    for(i = 0; i < tab.length; i++) {
        $http.get(tab[i]) 
        .then(function(res) {
            list.push(res.data);
        });
    }
    return list;
}

return {
    getLists: getLists
};
]);

I aim to organize and display the data from the different files based on gender (male/female) where it depends on the 'nm' field. The names of females should appear before the names of males, with each person's data from the first URL appearing in the first line, the second URL in the second line, and so on.

Html code:

<tr ng-repeat="d in list">
  <td>{{d.nm}}</td>
  <td>{{d.cty}}</td>   
  <td>{{d.hse}}</td>
  <td>{{d.yrs}}</td> 
</tr> 

I am considering implementing a conditional test in the controller to segregate between female and male names. However, I am unsure about the exact approach. Any suggestions on how to proceed?

Answer №1

If you assign an ID to the Name field, you can then use the orderBy method to sort by the ID of the name.

<tr ng-repeat="d in list| orderBy:ID">

</tr> 

Answer №2

Angular offers an orderBy directive that can be utilized within ng-repeat to effectively sort your data.

Here is an example:

Simply replace genderField and nameField with the appropriate property names you wish to use for sorting.

<tr ng-repeat="d in list| orderBy:['genderField','nameField']">
  <td>{{d.nm}}</td>
  <td>{{d.cty}}</td>   
  <td>{{d.hse}}</td>
  <td>{{d.yrs}}</td> 
</tr> 

Reference

Answer №3

Following @tommoc’s advice from a previous comment, I successfully implemented an id and it worked like a charm :)

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

Having trouble getting an HTML form to work when making a PHP and Ajax request

I am trying to validate an HTML form using Ajax to prevent the browser from loading the page. Ideally, when a user enters their first name, it should display above the HTML form. However, I am encountering an issue where it is not showing up as expected... ...

The default skin of video.js is disrupted by a 16:8 ratio

Incorporating videojs into my react application has presented a challenge. I have enclosed the video player in a div set to a 16:8 ratio, but unfortunately the default skin does not display properly. On the other hand, when I implement code that includes t ...

The ng-repeat feature is causing duplicate models to be held when dynamically adding items

I am currently developing a webpage that allows users to dynamically add line items. The framework I am using is AngularJS (v 1.4.7). While I was successful in adding items dynamically to the ng-repeat, I encountered an issue where the modal did not appear ...

The step-by-step guide to deactivating server-side JavaScript on MongoDB using a Java application

I am working on a Java web application that interacts with a MongoDB Atlas database for CRUD operations. My goal is to disable server-side JavaScript for my Atlas instance directly from the Java web application itself. After researching, I came across th ...

transmitting information to Laravel via ajax

Is it possible to send a multi-step form data separately to the Laravel controller in order to store them into MySQL? An example would be sending the inputs data shown below: <ul> <li> <input type="radio" class="step1r1" value ...

What is the process for changing the output paper size to A4 in React Native (expo android)?

Using React Native to develop an Android app for billing purposes, I encountered an issue with the output paper size being 216mmX279mm instead of the standard PDF size of 210mmX297mm. Utilizing expo-print and printToFileAsync from expo, I aim to achieve a ...

The issue with 'DemoCtrl' defined in Angular JS is that it does not correspond to a valid argument

signup.html <div ng-controller="UniqueCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage" ng-app="inputBasicDemo"> <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding=""> <div> <md- ...

Add square brackets to an AngularJS variable's value during the binding process

Hello, I am completely new to AngularJS and I have a simple scenario that I need help with. When there is no value specified in the input field where ng-model is defined, it should display the output as: Hi However, when there are some values specified ...

Developing a downloadable PDF version of an online platform

For weeks now, I have been tirelessly searching for a solution to a problem that has stumped me once before. The Challenge: My company created a sophisticated web-based data analytics suite for a major beverage distributor. Our client is now requesting a ...

javascript extract data from JSON

How can I extract values from the [object Object] in javascript? I have a JSON response from PHP that I am passing into JavaScript. I want to retrieve the GPSPoint_lat and GPSPoint_lon values. var jArray = ; var obj = JSON.parse(jArray); I am gett ...

It is not possible to include a new property to an object while inside a function

Looking to add a property to an object? Check out the code below: import React from 'react'; import { Link } from 'react-router-dom'; const Question = () => { let active; const handleClick = (iconName) => { active = {}; ...

What is the best way to verify the presence of a value in an SQL column?

I need to check if a value exists in a column. If the value already exists, I do not want to insert it into the table. However, if it does not exist, then I want to add new data. Unfortunately, my attempted solution hasn't been successful. You can fi ...

Verify if a set of Radio buttons contains at least one option selected

Need help with validating a Feedback Form using either JQuery or Javascript. The requirement is to ensure that every group of radio-buttons has one option selected before the form can be submitted. Below is the code snippet from form.html: <form id=&ap ...

Typescript tutorial: Implementing a 'lambda function call' for external method

The Issue Just recently diving into Typescript, I discovered that lambda functions are utilized to adjust the value of this. However, I find myself stuck on how to pass my view model's this into a function that calls another method that hasn't b ...

What is the best method for saving and accessing a user-entered date using session storage?

https://i.sstatic.net/I8t3k.png function saveDateOfBirth( dob ) { sessionStorage.dateOfBirth = dob; } function getDateOfBirth() { document.getElementById("confirm_dob").textContent = sessionStorage.dateOfBirth; } function pr ...

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

Implement pop-up functionality on additional buttons. Modify existing code to accommodate multiple buttons

I have a feature that allows me to click on a button and trigger a pop-up window with the desired content. The issue I am facing is how to duplicate this functionality for multiple buttons, each triggering a different pop-up content. I attempted to duplic ...

Guide on utilizing exported API endpoint in Node and Express

Seeking a deeper understanding of express and its utilization of various endpoints. Recently came across an example of an endpoint that reads in a json file, demonstrated as follows: const fs = require('fs'); const path = require('path&apos ...

What's the best way to incorporate mouseenter() and mouseleave() into several elements sharing the same class?

I have a vision for a fun game where players must navigate from one platform to another without falling off the edges. The game starts when you hover over the initial platform, and success is achieved by reaching the final platform. However, failure occurs ...

What is the best way to send data from a header component to a separate container component?

Utilizing React-router-dom, I am able to seamlessly switch between components in the following setup: <Router> <div> <Header /> <NavigationBar /> <Switch> <Route exact path ...