Pull specific record from array using AngularJS

Question

So I have created a SPA that displays student information from a database. I have function to add a student, display student data with specific views and update/delete student records.

I am struggling with the update function. My issue is that when I type a student ID into the search box on the page I cannot get it to pull that specific record from the JSON response from the server. I just can't seem to find the logic to write this correctly.

Here is part of my code, sorry if I have struggled to explain this properly. I could not find any other articles relating specifically to this issue I am having.

Here is the function I am using that is attached to the button on my HTML page, currently I just have it setup to pull the first record in the array (just to prove it will pull the data and fill the fields.

app.controller('editCtrl', function($scope, $http) {

$http.get("getStudentData.php")
    .then(function (response) {
        $scope.students = response.data;
    });

$scope.getRecord = function() {
    id = $scope.sid;

$scope.student = $scope.students[0];

And here is part of my HTML:

    <div class="form-group">
<label for="sid">Student ID:</label>
<input type="text" class="form-control" id="sid" ng-model="sid">
</div>

<p><button type="button" class="btn btn-primary" ng-click="getRecord()">Get 
Student Info</button> </p>

<div class='row'>

<div class="col-md-6">

    <div class="form-group">
        <label for="first_name">First Name:</label>
        <input type="text" class="form-control" id="first_name" ng- 
model="student.first_name">
    </div>
    <div class="form-group">
        <label for="last_name">Last Name:</label>
        <input type="text" class="form-control" id="last_name" ng- 
model="student.last_name">

Sajeetharan · Accepted Answer · 2018-04-29 18:04:39Z

2

Pass the sid to your function as,

<p><button type="button" class="btn btn-primary" ng-click="getRecord(sid)">Get 
Student Info</button> </p>

and then in controller, use array.find() to get the specific student

$scope.getRecord = function(sid) {
    id = sid;
    $scope.student = $scope.students.find(s=>s.id ==sid);        
}

answered Apr 29, 2018 at 18:04

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Daniel Miller Over a year ago

I tried this but it seems to have broken other elements on the page. Would it be better for me to make the function send a get request to the server and have it return specific JSON data rather than trying to pull from the entire JSON encoded database?

Daniel Miller Over a year ago

Here's a link to the entire project on my github github.com/dMilluh/PHP2-Final-Project

Sajeetharan Over a year ago

what do you mean by it broken other elements? this would be the best option rather than sending request back to server which is going to be heavy

Daniel Miller Over a year ago

Nevermind, the additional breaks were my error. It will correctly edit database info but does not display the correct record data once you execute the getRecord function. It pulls the first record in the array.

Daniel Miller Over a year ago

thank you for your answer, that got the data flowing as expected. One more question if you have the time; after executing the function and finding the student with the same sid, how come when I then reference student.first_name (or any property of the student) it does not display? Do I need to attach an index value to the student?

|

Collectives™ on Stack Overflow

Pull specific record from array using AngularJS

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related