Méthode GET avec la liste des voitures :

const express = require('express')

const app = express()

app.use(express.static('public'))

app.get('/cars', (req, res) => {
    res.status(200).json([{
        name :  'a',
        color : 'red'
    },{
        name :  'b',
        color : 'blue'
    }])
})

module.exports = app

J'essaye de charger la liste dans ma page html=>

En cliquant sur le bouton avec l'identifiant load, la liste des cars sur le serveur est demandée ; les voitures avec la couleur red sont chargées dans la table avec l'identifiant main avec un tr pour chaque voiture.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A simple app</title>
    <script>
    async function load(){
try{
     let url ='http://localhost:8080/cars'
       let response = await fetch(url)
        let data = await response.json()
        let table = document.getElementById('main')
         table.innerHTML = ''
            for (let e of data){
                 let rowContent = `
                    <tr>
                            <td>
                                ${e.name}
                            </td>
                            <td>
                                ${e.color}
                            </td>
                        </tr>`
                    let row = document.createElement('tr')
                    row.innerHTML = rowContent
                    //row.dataset.id = e.id
                    table.append(row)
            }
              catch(err){
                    console.warn(err)
                }

}
    }
    </script>
</head>
<body>
    A simple app
    <table id=main></table>
    <input type="button" value="add" onClick={load()} id="load"/>
</body>
</html>
0
Andrewino 5 févr. 2020 à 01:55

1 réponse

Meilleure réponse

Il y a peu de raisons pour lesquelles vous ne pouvez pas le faire, c'est parce que cors, catch bloquent et port.

Vous pouvez peut-être essayer ceci html ci-dessous :

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A simple app</title>
    <script>
    async function load(){

        try {
            let url ='http://localhost:3000/cars';
            let response = await fetch(url);
            let data = await response.json()
            let table = document.getElementById('main');
            table.innerHTML = '';
            for (let e of data){
                let rowContent = `
                    <tr>
                        <td>${e.name}</td>
                        <td>${e.color}</td>
                    </tr>`;
                let row = document.createElement('tr')
                row.innerHTML = rowContent;
                table.append(row);
            }
        } catch(ex) {
            console.log(ex);
        }
    }
    </script>
</head>
<body>
    A simple app
    <table id=main></table>
    <input type="button" value="add" onClick={load()} id="load"/>
</body>
</html>

Et maintenant, dans votre serveur, vous pouvez changer avec ce serveur simple :

const express = require('express');
const app = express();

const cors = require('cors');
app.use(cors( { origin: '*'}));


app.get('/cars', (req, res) => {
  res.status(200).json([{
      name :  'a',
      color : 'red'
  },{
      name :  'b',
      color : 'blue'
  }])
});


app.listen(3000, () => {
  console.log('Server is up');
});

J'espère que cela peut vous aider.

0
Titus Sutio Fanpula 5 févr. 2020 à 05:52