My Angular application needs to call web services from two different URLs. The first URL abc.com/student/3 provides a list of students, while the second URL abc.com/parent/idofStudent3 gives the parent's first name when passed the student ID.
I have successfully retrieved data from the first URL but am struggling to retrieve data from the second URL by passing the first record data in ng-repeat. Can you provide guidance on how to display the parent name on the webpage?
HTML Page:
<h1 ng-repeat="x in myWelcome">
{{x.firstname}} || {{x.parentId}} </h1>
Instead of displaying the parentId, I want to call another web service to fetch and display the parent name by passing the parentId as a parameter. How can I achieve this within the current setup?
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("abc.com/student/3")
.then(function(response) {
$scope.myWelcome = response.data;
});
});
</script>
First webservice response example:
{
"student":[
{
"name":"john",
"parentId": 12,
"address":"NYC"
},
{
"name":"Rohi",
"parentId": 14,
"address":"NJ"
},
]
}
Second webservice responses for parentId 12 and 14:
{
"firstName": "Sr. John"
}
{
"firstName": "Sr. Rohi"
}
-------------------------
firstname || parentName
-------------------------
John || Sr. John
Rohi || Sr. Rohi