I want to populate the data from Database and put it in a drop down using Angular Front end and Spring boot back end

Question

I have a Database in MySQL and I need to get the data from Database and populate in a Drop down using AngularJS. I have tried this code in my AngularJS for the drop down but it doesn't get the data from database and populate it.

 <div data-ng-init="getLocation1()">
                <b>Current Location:</b> <select id="cur_location">
                        <option value="">-- Select Current Locations --</option>
                        <option data-ng-repeat="location1 in location" 
value="{{location1.name}}">{{location1.name}}</option>
            </select><br>
                    </div>

This is the code which is used to get all the locations.

// Get all location1
  getLocation1(): Promise<Location1[]> {
    return this.http.get(this.location1Url)
      .toPromise()
      .then(response => response.json() as Location1[])
      .catch(this.handleError);
  }

  getLocation1ByName(name: string): Promise<Location1[]> {
    const url = `findbyname/${name}`;
    return this.http.get(url)
      .toPromise()
      .then(response => response.json() as Location1)
      .catch(this.handleError);
  }

Spring boot back end code is like this.

@GetMapping(value="/location1",  produces= MediaType.APPLICATION_JSON_VALUE)
        public List<Location> getAll() {
            List<Location> list = new ArrayList<>();
            Iterable<Location> location = repository.findAll();
            location.forEach(list::add);
            return list;
        }

        @PostMapping(value="/postlocation1")
        public Location postLocation(@RequestBody Location location) {
            repository.save(new Location(location.getName(),location.getX(),location.getY()));
            return location;
        }

Any suggestions to populate the data using Angular JS?

score 1 · Accepted Answer · answered May 19 '18 at 13:08

One step at a time, first make sure your call is successful.

this.http.get(url).subscribe(res => console.log(res));

Open developer panel, and see in the Console and Network tab, anything printed as what you want. Once you get the data, then you can assign it to a class property.

data; this.http.get(url).subscribe(res => { this.data = res });

The rest is how to wire the data with your angular template then.

I want to populate the data from Database and put it in a drop down using Angular Front end and Spring boot back end

1 Answers1