Получить список объектов из метода GET по нажатию кнопки и вставить в таблицу страниц html - PullRequest
Новая
       38

Получить список объектов из метода GET по нажатию кнопки и вставить в таблицу страниц html

0 голосов
/ 05 февраля 2020

GET метод со списком автомобилей: 

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

Я пытаюсь загрузить список на мою html страницу =>

При нажатии на кнопку с load id, запрашивается список cars на сервере; автомобили с цветом red загружаются в таблицу с идентификатором main с tr для каждого автомобиля. 

<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>

1 Ответ

0 голосов
/ 05 февраля 2020

Есть несколько причин, по которым вы не можете этого сделать, потому что cors, catch block и port.

Может быть, вы можете попробовать это html ниже : 

<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>

И теперь, на вашем сервере, вы можете изменить с помощью этого простого сервера: 

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');
});

Надеюсь, это поможет вам.

...