Afficher des données venant de la BD

**yLaplace** · 05/10/2020, 15h08

Bonjour,
Je suis confronté à une situation qui , pour ma part , je ne comprends pas pourquoi.
Voilà bref allons au problème.
J'ai une bd mysql qui contient une table

Code SQL :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
CREATE TABLE accountowner.`employees` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `first_name` varchar(100) DEFAULT NULL,
  `last_name` varchar(500) DEFAULT NULL,
  `email_address` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;
 
Insert Into accountowner.employees(first_name,last_name,email_address) values('Coulibaly','Yaya','y_laplace@yahoo.fr');
Insert Into accountowner.employees(first_name,last_name,email_address) values('Silue','Dognime','silue.dognime@gmail.com');

Backend Spring boot

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@RestController 
//@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping("/api")
public class EmployeeController {
	private static final Logger logger = LogManager.getLogger(EmployeeController.class);
 
    @Autowired
    private EmployeeRepository employeeRepository;
 
    @GetMapping("/employees")
    public List<Employee> getAllEmployees() {
    	List<Employee> emp = employeeRepository.findAll();
 
    	for (Employee e: emp) 
    	{
    		System.out.println(e.getFirstName());
    	}    	
 
        return emp;
        //return "[{'firstName':'Coulibaly','lastName':'Yaya','id':9,'emailId':'y_laplace@yahoo.fr'},{'firstName':'Silue','lastName':'Dognime','id':9,'emailId':'silue.dognime@gmail.com'}]";
    }

Front end Angular

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
export class Employee {
    id: number;
    firstName: string;
    lastName: string;
    emailId: string;
    active: boolean;
}

service

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
   EMP = [
       {
           "firstName":"Coulibaly",
           "lastName":"Yaya",
           "email":"y_laplace@yahoo.fr",
           "id":9
       },
       {"firstName":"Silue",
       "lastName":"Dognime",
       "email":"silue.dognime@gmail.com",
       "id":9
       }
    ]
 getEmployeesList(): Observable<any> {
    return this.http.get(this.baseUrl).pipe(retry(3), catchError(this.handleError));
    //return this.http.get(`${this.baseUrl}`);
    //return of(this.EMP);
    //return this.http.get('/asset/data/people.json');
  }

home

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
  getEmployees() {
    this.employees = this.employeeService.getEmployeesList();
  }
 console.log('Get employees From database ...');
      this.getEmployees();
      console.log('Get employees From database end ...');

a l'execution

http://localhost:9000/api/employees dans le navigation je recois les bonnes info

[{"firstName":"Coulibaly","lastName":"Yaya","email":"y_laplace@yahoo.fr","id":9},{"firstName":"Silue","lastName":"Dognime","email":"silue.dognime@gmail.com","id":9}]

mais quand je lance dans le projet, rien ne s'affiche.
Et quand je fige la valeur dans le service

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 EMP = [
       {
           "firstName":"Coulibaly",
           "lastName":"Yaya",
           "email":"y_laplace@yahoo.fr",
           "id":9
       },
       {"firstName":"Silue",
       "lastName":"Dognime",
       "email":"silue.dognime@gmail.com",
       "id":9
       }
    ]
 
 getEmployeesList(): Observable<any> {
    //return this.http.get(this.baseUrl).pipe(retry(3), catchError(this.handleError));
    //return this.http.get(`${this.baseUrl}`);
    return of(this.EMP);
    //return this.http.get('/asset/data/people.json');
  }

la il n'affiche alors que je n'ai fait que recopie la valeur renvoyée dans le navigateur dans la variable EMP.
Merci pour votre aide

**dukoid** · 05/10/2020, 16h34

le template ?

ça donne quoi, ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{employees|async|json}}

**yLaplace** · 05/10/2020, 17h11

null

ca voudrait dire que le http ne renvoie rien bizarre car comme indiqué plus haut quand je tape l'url syuivant dans le navigation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

http://localhost:9000/api/employees

il ne renvoie :

[{'firstName':'Coulibaly','lastName':'Yaya','id':9,'emailId':'y_laplace@yahoo.fr'},{'firstName':'Silue','lastName':'Dognime','id':9,'emailId':'silue.dognime@gmail.com'}]

et c'est la même url qui est utilisée dans le service

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
private baseUrl = 'http://localhost:9000/api/employees';
 getEmployeesList(): Observable<any> {
    return this.http.get(this.baseUrl).pipe(retry(3), catchError(this.handleError));
    //return this.http.get(`${this.baseUrl}`);
    //return of(this.EMP);
    //return this.http.get('/asset/data/people.json');
  }

**dukoid** · 05/10/2020, 20h06

est ce que tu as une erreur dans la console du navigateur ?

surement une erreur CORS

**yLaplace** · 06/10/2020, 10h12

voici le contenu de la console:

core.js:4197 ERROR
[]
defaultErrorLogger @ core.js:4197
handleError @ core.js:4245
next @ core.js:27699
schedulerFn @ core.js:24537
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:24527
(anonymous) @ core.js:27171
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:27075
onHandleError @ core.js:27171
handleError @ zone-evergreen.js:368
runTask @ zone-evergreen.js:170
invokeTask @ zone-evergreen.js:480
ZoneTask.invoke @ zone-evergreen.js:469
timer @ zone-evergreen.js:2552
setTimeout (async)
scheduleTask @ zone-evergreen.js:2573
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleMacroTask @ zone-evergreen.js:233
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
(anonymous) @ zone-evergreen.js:2586
proto.<computed> @ zone-evergreen.js:1449
hostReportError @ hostReportError.js:2
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:27736
bootstrap @ main.ts:16
./src/main.ts @ main.ts:23
__webpack_require__ @ bootstrap:79
0 @ main.ts:27
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
Show 181 more frames

et voici ma class:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
package com.mis.laplace.config;
 
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.http.HttpMethod;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
 
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
 
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {
 
    // This is to be replaced with a list of domains allowed to access the server
   //You can include more than one origin here
    private final List<String> allowedOrigins = Arrays.asList("http://localhost:4200"); 
 
	public CorsFilter () {
       super();
    }
 
	@Override
    public final void doFilter(final ServletRequest req, final ServletResponse res, final FilterChain chain) throws IOException, ServletException {
       final HttpServletResponse response = (HttpServletResponse) res;
       response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
 
       // without this header jquery.ajax calls returns 401 even after successful login and SSESSIONID being succesfully stored.
       response.setHeader("Access-Control-Allow-Credentials", "true");
 
       response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
       response.setHeader("Access-Control-Max-Age", "3600");
       response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Authorization, Origin, Content-Type, Version");
       response.setHeader("Access-Control-Expose-Headers", "X-Requested-With, Authorization, Origin, Content-Type");
 
       final HttpServletRequest request = (HttpServletRequest) req;
       if (!request.getMethod().equals("OPTIONS")) {
           chain.doFilter(req, res);
       } else {
           // do not continue with filter chain for options requests
       }
    }
 
    @Override
    public void destroy() {
 
    } 
 
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {       
    }
}

**yLaplace** · 06/10/2020, 11h30

J'ai modifié la classe comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {
 
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        final HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Max-Age", "3600");
        if (HttpMethod.OPTIONS.name().equalsIgnoreCase(((HttpServletRequest) req).getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }
 
    @Override
    public void destroy() {
    }
 
    @Override
    public void init(FilterConfig config) throws ServletException {
    }
}

et l'erreur a l'execution dans le navigateur est la suivante:

ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'
at invalidPipeArgumentError (common.js:4152)
at AsyncPipe._selectStrategy (common.js:4254)
at AsyncPipe._subscribe (common.js:4244)
at AsyncPipe.transform (common.js:4232)
at Module.ɵɵpipeBind1 (core.js:24411)
at HomeComponent_Template (home.component.html:6)
at executeTemplate (core.js:7447)
at refreshView (core.js:7316)
at refreshComponent (core.js:8454)
at refreshChildComponents (core.js:7109)

Afficher des données venant de la BD

Angular

Vue hybride

Discussions similaires

Partager

Partager