Getting a list of objects in model and implementing into ng-repeat

Question

I have a webapp and two models which I would like to use. One model is Trainees and another one is TraineeStatus. I would like to get an array or a list of TraineeStatus inside Trainees and then pass it to AngularJS view an display it inside select method, what is the best approach to do it?

Trainees.java

@Entity
public class Trainees {

    @Id
    @GeneratedValue
    private int traineesID;
    private int groupsID;
    @ManyToOne
    private TraineeStatus traineestatus;
    private int customersID;
    private String name;
    private String surname;
    private String phoneDetails;
    private String email;

    public Trainees(){

    }

    public Trainees(String name, String surname, String phoneDetails, String email, int id, int groupsID, TraineeStatus traineestatus, int customersID) {
        super();
        this.name = name;
        this.surname = surname;
        this.email = email;
        this.phoneDetails = phoneDetails;
        this.groupsID = groupsID;
        this.traineestatus = traineestatus;
        this.customersID = customersID;
    }

    //getters and setters

    @Override
    public boolean equals(Object object) {
        if (object instanceof Trainees){
            Trainees contact = (Trainees) object;
            return contact.traineesID == traineesID;
        }

        return false;
    }

    @Override
    public int hashCode() {
        return traineesID;
    }
}

TraineeStatus.java

@Entity
@Table(name="traineeStatus")
public class TraineeStatus {

    @Id
    @GeneratedValue
    private int traineeStatusId;
    private String value;

    public TraineeStatus(){

    }

    public TraineeStatus(String value, int id) {
        super();
        this.value = value;
    }

    //getters and setters

    @Override
    public boolean equals(Object object) {
        if (object instanceof TraineeStatus){
            TraineeStatus value = (TraineeStatus) object;
            return value.traineeStatusId == traineeStatusId;
        }

        return false;
    }

    @Override
    public int hashCode() {
        return traineeStatusId;
    }
}

My view:

 <div class="input-append">
                        <select
                               required
                               ng-model="contact.traineestatus"
                               name="traineestatus.id"
                               placeholder="<spring:message code='sample.status'/> ">
                        <option ng-repeat="trainee in contact.traineestatus" value="{{trainee.id}}">{{trainee.value}}</option>
                        </select>
                    </div>
                    <div class="input-append">
                        <label>
                                <span class="alert alert-error"
                                      ng-show="displayValidationError && updateContactForm.traineestatus.id.$error.required">
                                    <spring:message code="required"/>
                                </span>
                        </label>
                    </div>

Currently with contact.traineestatus returns one object with id and value, but I would like to get an array.

I am trying to utilize the object, so I would have a select function, where it displays the value and would save the Id and save it in the Trainees table.

Is there a way to utilize this object and use it in my select? Thanks in regards!

Answer 1

This is a little difficult to explain, so I will try to keep it simple.

First of all you need to have in mind the the list of TraineeStatus is not going to be retrieved in the same request has the contact/trainees list, you will need a separate HTTP request to get that list.

The same way you have ContactRepository to get all the Trainees records, you will need a TraineeStatusRepository to get all the TraineeStatus records. Then, on one of your Services you would need a method to get the TraineeStatus list, like this:

private List<TraineeStatus> findAllTraineeStatus() {
    return traineeStatusRepository.findAll();
}

After that you will need to define an HTTP API to access that list (i.e. GET http://example.com/traineeStatus). The idea is probably the same you have to retrieve the ContactList.

Then, on your AngularJS app, you would need to use a function to load the list of TraineeStatus. For example:

$scope.getTraineeStatus = function () {
    // assuming the HTTP API is: GET http://example.com/traineeStatus
    $http.get('http://example.com/traineeStatus', config)
        .success(function (data) {
            $scope.traineeStatus = data;
        })
        .error(function (err) {
            // handle error
        });
}

And then loop through the $scope.traineeStatus property on the ng-repeat:

<select
       required
       ng-model="contact.traineestatus"
       name="traineestatus.id"
       placeholder="<spring:message code='sample.status'/> ">
<option ng-repeat="status in traineeStatus" value="{{status.id}}">{{status.value}}</option>
</select>