无法从Javascript中的csv读取数据_Javascript_Csv

无法从Javascript中的csv读取数据

javascript csv

无法从Javascript中的csv读取数据,javascript,csv,Javascript,Csv,我是Javascript新手，在的帮助下，我编写了以下代码来读取csv文件。计划：- <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Circles</title> <style> html,

我是Javascript新手，在的帮助下，我编写了以下代码来读取csv文件。计划：-

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function csvToJS(csv) {
    // Split the text into an array of lines
    var rows = csv.split('\n');

    // Then we want each row to be an array too
    return rows.map(function(row) {
        // Split the row into an array too
        row = row.split(', ');

        // Values in quotes should be strings, values without are numbers
        return row.map(function(cell) {
           if (cell[0] == '\'') return cell.slice(1,-1);
           else return parseFloat(cell);
        });
    });
 }
var req = new XMLHttpRequest();
req.open('GET', 'data.csv', true);
req.send();

req.onreadystatechange = function() {
    if (req.readystate == 4 && req.status == 200) {
       var csv = req.responseText;
       var data = csvToJS(csv);


    }
};
    var citymap = data;
    var cityCircle;

    function initialize() {
        // Create the map.
        var mapOptions = {
            zoom : 5,
            center : new google.maps.LatLng(37.09024, -95.712891),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

        var fillcolor = [];
        fillcolor[0] = '#FF0000';
        fillcolor[1] = '#FFFF00';
        fillcolor[2] = '#FF00FF';
        fillcolor[3] = '#00FF00';
        fillcolor[4] = '#0000FF';
        var loop = 0;
        for (i = 0; i < citymap.length; i++) {
            var populationOptions = {
                strokeColor : '#000000',
                strokeOpacity : 0.8,
                strokeWeight : 2,
                fillColor : fillcolor[loop],
                fillOpacity : 0.35,
                map : map,
                center : new google.maps.LatLng(citymap[i][1], citymap[i][2]),
                radius : Math.sqrt(citymap[i][3]) * 100000
            };

            cityCircle = new google.maps.Circle(populationOptions);
            loop = loop + 1;

        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

但我的代码不是显示地图。谁能帮我检查一下，帮我修改代码吗\ 我正在读取

csv（data.csv）

并将其复制到数组

data

。并将

数据

复制到

城市地图

。

我必须从csv中访问代码，如

var city=citymap[0][0]

不要盲目地对所有字段使用

parseFloat

，否则对名称，如

'chicago'

和其他它将给出的NaN：

尝试使用以下方法：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function csvToJS(csv) {
    var resp=[];
    var rows = csv.split('\n');
     for(var i=0;i<rows.length;i++){
         var row=rows[i].split(',');
         row[0]=row[0].trim();
         row[1]=parseFloat(row[1]);
         row[2]=parseFloat(row[2]);
         row[3]=parseFloat(row[3]);
        resp[i]=row;
     }
     return resp;
 }
var citymap;
var req = new XMLHttpRequest();
req.open('GET', 'https://cdn.rawgit.com/agershun/alasql/version-0.0.36/examples/csv/demo.csv', true);
req.send();

req.onreadystatechange = function() {
     //console.log(req);
    if (req.status == 200) {
       var csv = req.responseText;
      var data = csvToJS(csv);
       citymap = data;
    }
    initialize();

};

    var cityCircle;

    function initialize() {
        // Create the map.
        var mapOptions = {
            zoom : 5,
            center : new google.maps.LatLng(37.09024, -95.712891),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

        var fillcolor = [];
        fillcolor[0] = '#FF0000';
        fillcolor[1] = '#FFFF00';
        fillcolor[2] = '#FF00FF';
        fillcolor[3] = '#00FF00';
        fillcolor[4] = '#0000FF';
        var loop = 0;
        for (i = 0; i < citymap.length; i++) {
            var populationOptions = {
                strokeColor : '#000000',
                strokeOpacity : 0.8,
                strokeWeight : 2,
                fillColor : fillcolor[loop],
                fillOpacity : 0.35,
                map : map,
                center : new google.maps.LatLng(citymap[i][1], citymap[i][2]),
                radius : Math.sqrt(citymap[i][3]) * 100000
            };

            cityCircle = new google.maps.Circle(populationOptions);
            loop = loop + 1;

        }
    }


</script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>


圈子
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
功能csvToJS（csv）{
var resp=[]；
var rows=csv.split（'\n'）；
对于（var i=0；我为什么要使用“csv”而不是？我从Java文件中创建了一个csv。然后我从Java文件中调用这个javascript并传递值，但是“为什么”…只有五个值…只要用五个元素创建一个变量就行了。如果你想从Java获取数据，请创建一个。如果我的csv只有芝加哥而不是'Chicago'
，那该怎么办？是的但是，如果csv中有更多的城市，我该如何扩展？但是如果我的csv没有单引号呢？还有一件事，首先要花一些时间来正确获取代码流，使用console.log查看数据及其格式。此演示仅向您展示，以同样的方式使用本地文件路径处理相同类型的数据。@Newbie您发布了另一个question只需删除该内容或接受正确答案即可维护网站形象。请不要在此处创建不必要的内容，这对我们所有人都有好处。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function csvToJS(csv) {
    var resp=[];
    var rows = csv.split('\n');
     for(var i=0;i<rows.length;i++){
         var row=rows[i].split(',');
         row[0]=row[0].trim();
         row[1]=parseFloat(row[1]);
         row[2]=parseFloat(row[2]);
         row[3]=parseFloat(row[3]);
        resp[i]=row;
     }
     return resp;
 }
var citymap;
var req = new XMLHttpRequest();
req.open('GET', 'https://cdn.rawgit.com/agershun/alasql/version-0.0.36/examples/csv/demo.csv', true);
req.send();

req.onreadystatechange = function() {
     //console.log(req);
    if (req.status == 200) {
       var csv = req.responseText;
      var data = csvToJS(csv);
       citymap = data;
    }
    initialize();

};

    var cityCircle;

    function initialize() {
        // Create the map.
        var mapOptions = {
            zoom : 5,
            center : new google.maps.LatLng(37.09024, -95.712891),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

        var fillcolor = [];
        fillcolor[0] = '#FF0000';
        fillcolor[1] = '#FFFF00';
        fillcolor[2] = '#FF00FF';
        fillcolor[3] = '#00FF00';
        fillcolor[4] = '#0000FF';
        var loop = 0;
        for (i = 0; i < citymap.length; i++) {
            var populationOptions = {
                strokeColor : '#000000',
                strokeOpacity : 0.8,
                strokeWeight : 2,
                fillColor : fillcolor[loop],
                fillOpacity : 0.35,
                map : map,
                center : new google.maps.LatLng(citymap[i][1], citymap[i][2]),
                radius : Math.sqrt(citymap[i][3]) * 100000
            };

            cityCircle = new google.maps.Circle(populationOptions);
            loop = loop + 1;

        }
    }


</script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>