Navigating to an API endpoint while iterating through an ng-repeat loop

Question

Navigating to an API endpoint while iterating through an ng-repeat loop

I am currently working with an API that provides a list of values. My goal is to enable users to click on the name of a driver in the API and be directed to specific details related to that driver. However, I am struggling to figure out how to implement this functionality.

Here is the current layout: https://i.sstatic.net/kv8RX.png

An alternative design: https://i.sstatic.net/tQcTo.png

Desired outcome when clicking on the driver's name retrieved from ng-repeat in the API: https://i.sstatic.net/hXJsQ.png

I am relatively new to Angular and finding it quite perplexing at the moment.

Below is an excerpt from my controller:

import { app } from '../index';

app.controller("api", function ($scope, $http) {
$scope.Naziv = "Driver Championship Standings - 2013";
$scope.NazivH1 = "Driver Championship";
$scope.TopDrivers = function () {
    console.log("Button pressed");
    $http.get("https://ergast.com/api/f1/2013/driverStandings.json")
        .then(function successCallback(response) {
            $scope.drivers = response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
            console.log("response.data.MRData.StandingsTable.StandingsLists.0.DriverStandings");
            console.log(response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings);
        }, function errorCallback(response) {
            console.log("Unable to perform get request");
        });
}

Routing configuration:

app.config(function($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix("!");
    $routeProvider
        .when("/drivers", {
            templateUrl: "./src/pageDetails/drivers.html",
        })
        .when("/teams", {
            templateUrl: "./src/pageDetails/teams.html",
        })
        .when("/races", {
            templateUrl: "./src/pageDetails/races.html",
        })
        .otherwise({
            redirect: "./src/pageDetails/default.html",
        });
});

Here is a snippet of my template:

<div ng-controller="api" ng-init="TopDrivers()">
    <h1>{{NazivH1}}</h1>
    <div id="modifyDiv">{{Naziv}}</div>
    <div ng-repeat="x in drivers | orderBy: '+Points'">
        <div id="divRow">
            <table>
                <tr id="tableRow"><td id="td1">Nb: {{x.position}}</td><td id="td2">{{x.Constructors[0].nationality}} {{x.Driver.givenName}} {{x.Driver.familyName}}</td><td id="td3">{{x.Constructors[0].name}}</td> <td id="td4">Points: {{x.points}}</td> </tr>
            </table>
        </div>
    </div>
</div>

angularjs typescript

Answer 1

Answer №1

Why have ng-repeat on div instead of <tr>? Do you want a separate div for each driver or a separate row? Consider using ng-repeat on <tr> and add a ng-click directive on your <tr>. This way, when someone clicks on a driver row, a function in your controller can be executed to route to the driver details as shown below:

<tr ng-repeat="x in drivers | orderBy: '+Points'" ng-click="driverDetails(x.DriverId)" id="tableRow">
    <td id="td1">Nb: {{x.position}}</td>
    <td id="td2">{{x.Constructors[0].nationality}} {{x.Driver.givenName}} {{x.Driver.familyName}}</td> 
    <td id="td3">{{x.Constructors[0].name}}</td>
    <td id="td4">Points{{x.points}}</td>
</tr>

In your controller, define the driverDetails function like this:

$scope.driverDetails = function (driverId) {

    $location.path('/driverDetails').search({ driverId: driverId });
};

This function will change the URL by appending the driverId as a query string. Update your routes with a new route for /driverDetails:

.when("/driverDetails", {
    templateUrl: "./src/pageDetails/driverdetails.html",
})

When the driverDetails function runs, the driverdetails.html is loaded, allowing you to retrieve the driverId from the query string. In the driverdetails controller, fetch the specific driver data from your API.

Answer 2

Why have ng-repeat on div instead of <tr>? Do you want a separate div for each driver or a separate row? Consider using ng-repeat on <tr> and add a ng-click directive on your <tr>. This way, when someone clicks on a driver row, a function in your controller can be executed to route to the driver details as shown below:

<tr ng-repeat="x in drivers | orderBy: '+Points'" ng-click="driverDetails(x.DriverId)" id="tableRow">
    <td id="td1">Nb: {{x.position}}</td>
    <td id="td2">{{x.Constructors[0].nationality}} {{x.Driver.givenName}} {{x.Driver.familyName}}</td> 
    <td id="td3">{{x.Constructors[0].name}}</td>
    <td id="td4">Points{{x.points}}</td>
</tr>

In your controller, define the driverDetails function like this:

$scope.driverDetails = function (driverId) {

    $location.path('/driverDetails').search({ driverId: driverId });
};

This function will change the URL by appending the driverId as a query string. Update your routes with a new route for /driverDetails:

.when("/driverDetails", {
    templateUrl: "./src/pageDetails/driverdetails.html",
})

When the driverDetails function runs, the driverdetails.html is loaded, allowing you to retrieve the driverId from the query string. In the driverdetails controller, fetch the specific driver data from your API.

Answer 3

Answer №2

To create a driver details route with an optional parameter, define something like /driver-detail/:id in the route definition. Be sure to assign it its own controller and set up a method to retrieve the detailed data (consider using a service for this). Additionally, add an ng-click event handler for when a user is in the drivers list ng-repeat and click on a specific driver.

For example:

<tr id="tableRow" ng-click="goToDetail(x.id)">...</tr>

In the controller:

$scope.goToDetail() = function(id) {
    $location.path('/driver-detail/' + id)
}

Your route definition could be structured like this:

.when('/driver-detail/:id', {
    templateUrl: '...',
    controller: function($scope, $stateParams) {
      $scope.id = $stateParams.id;
      ...
    }
  }

Consider updating your technology stack as well. Even within AngularJS, the component API and tools like ui-router offer more flexibility and robust functionality compared to ngRouter. If you're kicking off a new project, consider starting with Angular CLI (currently Angular 7) for better support, resources, and development practices.

Answer 4

To create a driver details route with an optional parameter, define something like /driver-detail/:id in the route definition. Be sure to assign it its own controller and set up a method to retrieve the detailed data (consider using a service for this). Additionally, add an ng-click event handler for when a user is in the drivers list ng-repeat and click on a specific driver.

For example:

<tr id="tableRow" ng-click="goToDetail(x.id)">...</tr>

In the controller:

$scope.goToDetail() = function(id) {
    $location.path('/driver-detail/' + id)
}

Your route definition could be structured like this:

.when('/driver-detail/:id', {
    templateUrl: '...',
    controller: function($scope, $stateParams) {
      $scope.id = $stateParams.id;
      ...
    }
  }

Consider updating your technology stack as well. Even within AngularJS, the component API and tools like ui-router offer more flexibility and robust functionality compared to ngRouter. If you're kicking off a new project, consider starting with Angular CLI (currently Angular 7) for better support, resources, and development practices.

Navigating to an API endpoint while iterating through an ng-repeat loop

Answer №1

Answer №2

Similar questions

Creating a flowchart of a finite state machine within a browser-based software platform

"Step-by-step guide: Implementing a fixed scroll sidebar in AngularJS to mimic Facebook's sidebar (

Schema Connections in Kendo Diagram

What is the best way to time a Google Cloud Function to execute at the exact second?

The attribute 'set' is not found on the Set data type

Strategies for adding elements to a FormArray in Angular 4

Should I opt for the spread operator [...] or Array.from in Typescript?

How can I implement a button in Angular Ag Grid to delete a row in a cell render

Tips for managing various potential return types in TypeScript?

Upcoming Authentication Update: Enhancing User Profile with Additional Data Points

What is preventing me from defining the widget as the key (using keyof) to limit the type?

Using a .NET Web-API controller variable as a parameter in a JavaScript function

Encountering an error with Angular2 when referencing node modules

I'm building an angular website and considering using Ionic to develop the corresponding mobile apps. Can you recommend the simplest approach for this integration?

Rate of AngularJS Dirty Checking

Best Practices for Utilizing Bootstrap 5 Tooltip and Popover Methods in AngularJS Web Applications

Tips for transferring data when clicking in Angular 5 from the parent component to the child component

Unable to access ng-model values within ng-repeat loop

Angular/Ionic - How can I prevent my function from being called repeatedly while typing in an input field?

Utilizing ng-repeat to display a collection of Angular Highcharts charts