Discussion :

[MInfo25]

Bonjour
Je n'arrive pas à récupérer les données de l'API
Voici mon code :

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
 
onSearch = async (dpt, type) => {
  if(dpt && type){
    try {
      let response = await fetch('https://etablissements-publics.api.gouv.fr/v1/organismes/${dpt}/${type}')
      let data = await response.json();
      this.setState({
        data: data.features,
        error: ''
      })
    } catch(e){
      this.setState({ erro : "Erreur lors de la recherche"}) 
    }
  }else{
     this.setState({ error: "Merci de choisir un département et un établissement"})
  }
}

Pourtant que je vais sur ce lien : https://etablissements-publics.api.g...nismes/76/cpam

J'obtiens bien les données json.

[gwyohm]

salut, mais t'as quoi comme erreur ?

[MInfo25]

Désolée j'ai oublié de mettre l'erreur:
La voici:

Access to fetch at 'https://etablissements-publics.api.gouv.fr/v1/organismes/$%7Bdpt%7D/$%7Btype%7D' from origin 'http://localhost:3002' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
App.js:20 GET https://etablissements-publics.api.gouv.fr/v1/organismes/$%7Bdpt%7D/$%7Btype%7D net::ERR_FAILED

[gwyohm]

alors, problème 1 : tu a mis des ' et non des `
du coup l'URL est pas bonne.
problème 2 : cors. ce service n'est pas ouvert en cross domaines.
à noter que /v3/departements/76/cpam lui est ouvert... il te convient celui là ?

[MInfo25]

Bonjour
Je n'arrive pas à afficher les données codées en dur quand je clique sur le bouton

Code html :

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

 <Button primary onClick={() =>this.props.onSearch(this.state.dpt, this.state.type)}>Lancer la recherche</Button>

Voici les données en dur d'un établissement:

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
import React from 'react';
import { Card } from 'semantic-ui-react';
 
 
const Etablissement = () => {
    return (
        <Card>
            <Card.Content>
                <Card.Header>Nom d'établissement</Card.Header>
                <Card.Meta>Téléphone: 01 23 45 67 89</Card.Meta>
                <Card.Meta>Email: abc@def.com</Card.Meta>
            </Card.Content>
        </Card>
    )
}
 
 
export default Etablissement;

Voici le composant où se trouve mon bouton "<Button primary..."

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
import React, {Component} from 'react';
import { Button, Select } from 'semantic-ui-react';
import './recherche.css';
 
 
class Recherche extends Component {
 
    state = {
         dpt : '',
         type : ''
    }
 
 
    onDptChange = (e, data) => { 
    this.setState({dpt : data.value})
    }
 
 
    onTypeChange = (e, data) => {  
        this.setState({type : data.value})
        }
 
 
 
        render(){
        const optionDpt = [
            {value: "76", key: "76", text: "Seine-Maritime"},
            {value: "27", key: "27", text: "Eure"},
            {value: "14", key: "14", text: "Calvados"},
            {value: "75", key: "75", text: "Paris"},
        ];
 
 
        const optionsType = [
            { value: "cpam", key:"cpam", text: "Caisse primaire d’assurance maladie (CPAM)"},
            { value: "cci", key:"cci", text: "Chambre de commerce et d’industrie (CCI)"},
            { value: "crous", key:"crous", text: "CROUS et ses antennes"}
        ]
        return(
            <div className="recherche">
                <Select placeholder="Choisissez un département" onChange={this.onDptChange} options={optionDpt} value={this.state.dpt} />
                <Select placeholder="Choisissez une administration" onChange={this.onTypeChange} options={optionsType} value={this.state.type} />
                <Button primary onClick={() => this.props.onSearch(this.state.dpt, this.state.type)}>Lancer la recherche</Button>
                <Button secondary onClick={this.props.onEmpty}>Vider la recherche</Button>
            </div>
        )
    }
}
 
 
export default Recherche;

Et voici mon fichier App.js qui affiche le resultat :

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
 
import React, { Component } from 'react';
import Recherche from './components/Recherche';
import Etablissement from './components/Etablissement';
import { Message, Card } from 'semantic-ui-react';
 
 
import './App.css';
 
 
class App extends Component {
 
 
  state = {
    data: [],
    error: ''
  }
 
 
onEmpty = () => {
  this.setState({ data: [], error: ''})
}
onSearch = async (dpt, type) => {
  if(dpt && type){
    try {
      let response = await fetch('https://etablissements-publics.api.gouv.fr/v3/departements/${dpt}/${type}')
      let data = await response.json();
      this.setState({
        data: data.features,
        error: ''
      })
    } catch(e){
      this.setState({ erro : "Erreur lors de la recherche"}) 
    }
  }else{
     this.setState({ error: "Merci de choisir un département et un établissement"})
  }
}
 
 
renderResults = () => {
  return this.state.data.map((etablissement) => {
    return <Etablissement key={etablissement.properties.id} properties={etablissement.properties} />
  })
}
  render() {
    return (
      <div className="App">
        <h1>Annuaire des Administrations en Pays de la Loire</h1>
        <Recherche onSearch={this.onSearch} onEmpty={this.onEmpty} />
        { this.state.error ? <Message warning>{this.state.error}</Message> : undefined} 
        {this.state.data ? 
        <Card.Group>
          { this.renderResults() }
        </Card.Group>
        : undefined }
      </div>
    );
  }
}
 
 
export default App;

[MInfo25]

Oui effectivement ça marche suite à tes conseils, merci la solution est comme ceci:

Code :

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

  let response = await fetch(`https://etablissements-publics.api.gouv.fr/v3/departements/${dpt}/${type}`)