以奇怪的格式将CSV转换为JSON

时间:2013-05-01 12:54:36

标签: javascript json csv webgl

我有很多想要在webgl globe中使用的地理位置。 Webgl的格式是

Googles .json文件在其工作webgl globe源[["1993",[long, lat,weight,long, lat,weight],["1994",[long, lat,weight,long, lat,weight,long, lat,weight,long, lat,weight]]]

中的示例

我一直在寻找一种方法来转换它,但我找不到在线转换器。 有谁知道我在哪里可以找到这种格式的转换器或建议一种方法来做到这一点。

我的数据样本:

 - Year  Latitude   Longitude   Magnitude
 - 1995 -82.8627519 -135         0.11
 - 1995 -54.423199  3.413194     0.01
 - 1994 -53.08181   73.504158    0.01
 - 1994 -51.796253  -59.523613   0.04
 - 1993 -49.280366  69.348557    0.02
 - 1993 -41.4370868 147.1393767  0.18

再看一下,我认为Google正在使用的json文件是一个嵌套的json数组数组。此

1 个答案:

答案 0 :(得分:0)

有多种方法可以解析数据。 第一步是将数据保存到文件中。 例如:

Year  Latitude   Longitude   Magnitude
1995 -82.8627519 -135         0.11
1995 -54.423199  3.413194     0.01
1994 -53.08181   73.504158    0.01
1994 -51.796253  -59.523613   0.04
1993 -49.280366  69.348557    0.02
1993 -41.4370868 147.1393767  0.18

在raw.txt中

第二步是加载和解析数据。 解析时需要注意以下几点:

  1. 原始数据的空格数量不一致,将值分开,因此需要首先折叠这些数据,以便我们可以按空格字符拆分行/行。幸运的是,数据不包含包含空格的名称,因此我们可以像/\s{2,}/g
  2. 那样使用RegEx
  3. 我们希望将有关一年的所有数据收集到一个列表中。一种方法是使用数组并连续检查它是否已经具有年份值。另一个是简单地使用对象/关联数组/字典而不用担心任何检查。
  4. 在对象中正确收集数据后,我们将其弹出一个数组,以便与所使用数据的格式相匹配。
  5. 这就是我的意思:

    xhr = new XMLHttpRequest();
            xhr.open('GET', '/globe/raw.txt', true);
            xhr.onreadystatechange = function(e) {
              if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var lines = xhr.responseText.split("\n");//split .txt file into lines
                    var data = [];//prepare an array to hold the end result
                    var dict = {};//use an Object/Dictionary to collapse data from same key/year
                    for(var i = 1 ; i < lines.length; i++){//for each line
                        var line = lines[i].replace(/\s{2,}/g, ' ').split(' ');//collapse white spaces and split into an array of values
                        if( !dict[line[0]]) dict[line[0]] = [];//if there isn't an array to store that data yes, make one
                        dict[line[0]].push(parseFloat(line[1]));//append data into the coresponding key/year
                        dict[line[0]].push(parseFloat(line[2]));
                        dict[line[0]].push(parseFloat(line[3]));
                    }
                    for(var key in dict) data.push([key,dict[key]]);//at the end, loop through the object and populate an array
                    console.log(data);
                }
              }
            };
            xhr.send(null);
    

    所以如果你使用这样的东西:

    xhr = new XMLHttpRequest();
            xhr.open('GET', '/globe/raw.txt', true);
            xhr.onreadystatechange = function(e) {
              if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var lines = xhr.responseText.split("\n");//split .txt file into lines
                    var data = [];//prepare an array to hold the end result
                    var dict = {};//use an Object/Dictionary to collapse data from same key/year
                    for(var i = 1 ; i < lines.length; i++){//for each line
                        var line = lines[i].replace(/\s{2,}/g, ' ').split(' ');//collapse white spaces and split into an array of values
                        if( !dict[line[0]]) dict[line[0]] = [];//if there isn't an array to store that data yes, make one
                        dict[line[0]].push(parseFloat(line[1]));//append data into the coresponding key/year
                        dict[line[0]].push(parseFloat(line[2]));
                        dict[line[0]].push(parseFloat(line[3]));
                    }
                    for(var key in dict) data.push([key,dict[key]]);//at the end, loop through the object and populate an array
                    window.data = data;
                    for (i=0;i<data.length;i++) {
                        globe.addData(data[i][1], {format: 'magnitude', name: data[i][0], animated: true});
                      }
                     globe.createPoints();
                     settime(globe,0)();
                     globe.animate();
                }
              }
            };
            xhr.send(null);
    

    在服务器上运行的WebGL Globe experiment中,您将看到自己的数据。 WebGL globe