Блог

Главная - Вопросы по программированию - Ошибка типа: table.map не является функцией

Ошибка типа: table.map не является функцией

#javascript #json #http #fetch

Вопрос:

Я просто пытаюсь извлечь данные из CSV-файла, в котором мне нужно перебирать массив объектов. Но цикл не происходит, и его выбрасывание этого массива.map или массива.forEach не является функцией. HTML-файл:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.1.0/dist/chart.min.js"></script>
</head>
<body>
    <canvas id="chart" width="400" height="400">

    </canvas>
    <script>
 
        fetchData();
        async function fetchData(){
          try {
            const data = await fetch('http://localhost:3000/');
            const table = await data.text();
            console.log(table);
            table.map(item => {
                console.log(item["Year"])
            });
            
          } catch (error) {
              console.error(error);
          }

        }
    </script>
</body>
</html>

Бэкэнд node.js файл:

 const express = require('express');
var app = express();
const cors = require('cors')
var fs = require('fs').promises;
var parse = require('csv-parse/lib/sync');
app.get('/',cors(), async (req, res) => {
  (async function () {
    const fileContent = await fs.readFile('test.csv');
    const records = parse(fileContent,{columns:true});
    res.send(records);
})();
});
app.listen('3000',() => console.log('listening on 3000'));

Полученные данные выглядят следующим образом:
[{«Year»:»1880″,»Glob»:»-.16″,»NHem»:»-.27″,»SHem»:»-.04″,»24N-90N»:»-.35″,»24S-24N»:»-.13″,»90S-24S»:»-.01″,»64N-90N»:»-.81″,»44N-64N»:»-.46″,»24N-44N»:»-.26″,»EQU-24N»:»-.15″,»24S-EQU»:»-.10″,»44S-24S»:»-.03″,»64S-44S»:».05″,»90S-64S»:».65″},{«Year»:»1881″,»Glob»:»-.08″,»NHem»:»-.17″,»SHem»:».01″,»24N-90N»:»-.33″,»24S-24N»:».10″,»90S-24S»:»-.06″,»64N-90N»:»-.92″,»44N-64N»:»-.43″,»24N-44N»:»-.18″,»EQU-24N»:».10″,»24S-EQU»:».11″,»44S-24S»:»-.05″,»64S-44S»:»-.07″,»90S-64S»:».58″},{«Year»:»1882″,»Glob»:»-.10″,»NHem»:»-.20″,»SHem»:»-.01″,»24N-90N»:»-.29″,»24S-24N»:»-.05″,»90S-24S»:».02″,»64N-90N»:»-1.42″,»44N-64N»:»-.25″,»24N-44N»:»-.12″,»EQU-24N»:»-.05″,»24S-EQU»:»-.05″,»44S-24S»:».02″,»64S-44S»:».04″,»90S-64S»:».61″},…..(more objects)]

Комментарии:

1. У вас есть отображаемый массив, возвращенный из обещания ?

2. @SullivanTobias Да, я прикрепил первый сегмент массива в нижней части вопроса

Ответ №1:

Можешь попробовать JSON.parse(table).map(... . Из ошибки видно, что таблица не относится к типу массива.

Комментарии:

1. Да, это сработало, большое вам спасибо, но почему функция карты не работала? Это был повторяющийся массив объектов, так зачем нужен был синтаксический анализ, не могли бы вы объяснить, пожалуйста?

2. .text() не возвращает отображаемый результат

3. @SullivanTobias разве массив не является отображаемым объектом в JS? Он явно возвращает массив

4. Данные в таблице были строкой json, а не объектом json, и у нас нет метода map или forEach в строке. Используя синтаксический анализ, мы преобразовали строку json в объект json. И поскольку ваш объект json таблицы является массивом, вы можете использовать все функции, доступные в объекте массива. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

5. Если вы хотите распечатать или отправить объект json в строковом формате, вы можете использовать метод JSON.stringify ().

Ответ №2:

 const table = await data.text();

Это неправильно

попробуйте с помощью JSON.parse

Ответ №3:

серверная часть не отправляет файл как объект. попробуйте это

 const express = require('express');
var app = express();
const csvFilePath='./test.csv'
const csv=require('csvtojson')
csv()
.fromFile(csvFilePath)
 
const getData = async ()=>{
    const jsonArray= await csv().fromFile(csvFilePath);
    return jsonArray
}
// Async / await usage
app.get('/', async (req, res)=>{
    let data = await getData()
    return res.send(data)
 })

app.listen('3000',() => console.log('listening on 3000'));
Метки: