JavaScript将数据解析为对象

时间:2016-11-08 20:12:54

标签: javascript html csv

有趣的问题。我试图找出解析.csv文件中信息的最佳方法,这样我就可以获得原始数据并进行比较。

我现在要做的就是从解析的数据中为每个人创建一个对象。所以我的csv文件包含:

Position,Name,Salary,Gender,Category
Chef,John Doe,40000,M,0
Clerk,Jane Doe,20000,F,1
Server,Joe Doe,30000,M,2

这是一个非常小的部分,我有1000个不同的人,显然位置和重复。在我的代码中,我目前有javascript:

<script type="text/javascript"charset="utf-8">
  var lines;
  var person;

  $(document).ready(function() {
    //fetch text file
    $.get('data.csv', function(data) {
      //split on new lines
      lines = data.split('\n');

      //This line didn't work and gave me an error? 
      //person = lines.split(',');

      person = data.split(',');

                //window.alert(lines[1]);
                //window.alert(person[5]);

    });

  });

</script>

无论如何,我基本上已经尝试了一些东西,没有工作并删除它。那么让我回顾一下我的尝试。

  1. 每一行都能正常工作,因此当前行逐行显示整行。所以我尝试将这些行中的每一行拆分为基于,的玩家。然而,这给了我一个错误,指出.split未定义。
  2. 所以我接下来尝试的只是从数据中分离出来,这在某种程度上起作用。它完全分裂为第一行,然后在新线路时变得不稳定。它跳过位置chef并取John Doe。然后当它到达Category时它正确地使用0但是在使用Chef
  3. 时打印出window.alert(var[number])并在同一窗口中输入2 {

    然后我意识到,无论如何,这并不是真正有用的,我想让每个人都成为自己的对象。所以我希望每个person拥有自己的变量:position, name, salary, gender, category

    我查了一下,我有很多方法可以制作它,但是没有一种方法可以通过文件获取信息,但是在那时手动定义它。那么有人可以通过某种方式帮助我吗?我是否必须做一些for循环,然后有一些有趣的事情:

    var people = {
      position:"",
      name:"",
      salary:0,
      gender:"",
      category:,
    };
    
    for(i = 5; i != eof; i+5){
      people.position() = person[i];
      people.name() = person[i+1];
      people.salary() = person[i+2];
      people.gender() = person[i+3];
      people.category() = person[i+4];
    }
    

    老实说不太确定,所以对此的任何帮助都会很棒。谢谢!

    编辑: 在卢卡斯的帮助下,这就是我目前所处的位置:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
    
            <script src="https://d3js.org/d3.v4.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
            <script type="text/javascript"charset="utf-8">
    
    
              var people = [];
    
               $(document).ready(function() {
                 $.get('data.csv', function(data){
    
                   var lines = data.split('\n');
                   var properties = ["position", "name", "salary", "points", "team"]
    
                   for (var i = 0; i < lines.length; i++){
                     var person = lines[i].split(',');
                     var tmpPlayer = {}
                     for (var n = 0; n < person.length; n++){
                       tmpPlayer[properties[n]] = person[n]
                     }
                     people.push(tmpPlayer);
                   }
    
                 });
    
                //correctly displays the array of every person
                console.log(people);
                //gives the result undefined
                console.log(people[1]);
                //error Uncaught TypeError: Cannot read property 'name' of undefined
                console.log(people[1]["name"]);
    
               });
    
            </script>
        </body>
    </html>
    

    data.csv文件:

    Position,Name,Salary,Gender,Category
    Chef,John Doe,40000,M,0
    Clerk,Jane Doe,20000,F,1
    Server,Joe Doe,30000,M,2
    

2 个答案:

答案 0 :(得分:0)

lines是一个数组而不是字符串,因此您无法将其拆分。您必须遍历lines中的每个元素并将其拆分。

  var people = [];
  $(document).ready(function() {
    //fetch text file
    $.get('data.csv', function(data) {
      //split on new lines
      var lines = data.split('\n');

      //This line didn't work and gave me an error? 
      //person = lines.split(',');

      for (var i = 0; i < lines.length; i++){
          var person = lines[i].split(',');
          var tmpPerson = 
           {
             position = person[0];
             name = person[1];
             salary = person[2];
             gender = person[3];
             category = person[4];
           }
           people.push(tmpPerson);

        }

                //window.alert(lines[1]);
                //window.alert(person[5]);

    });

  });

如果要为每个对象动态分配属性,只要在某处将它们定义为数组,就可以遍历属性而不是对它们进行硬编码。

var data = 
 `Chef,John Doe,40000,M,0
 Clerk,Jane Doe,20000,F,1
 Server,Joe Doe,30000,M,2`
  
      var people = [];
      $(document).ready(function() {

          var lines = data.split('\n');
    	  var properties = ["position", "name", "salary", "gender", "category"]
          //This line didn't work and gave me an error? 
          //person = lines.split(',');
    
          for (var i = 0; i < lines.length; i++){
                  var person = lines[i].split(',');
    		  var tmpPerson = {};
    		  for (var n = 0; n<person.length; n++){
    			tmpPerson[properties[n]] = person[n];
    		  }
               people.push(tmpPerson);
    
            }
            console.log(people)
    
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果您使用查询从文件中检索数据,那么您必须将日志记录/呈现放在一个单独的函数中,该函数在完成$.get查询时调用(或在{{1}内)查询本身)。 JavaScript以异步方式运行这些查询,因此您在将任何值推送到$.get之前记录people的结果。以下实施应解决您的问题。您似乎刚开始使用js进行冒险,所以我建议您阅读以下内容:https://blog.risingstack.com/asynchronous-javascript/

people

答案 1 :(得分:0)

lines = data.split('\n');返回一个数组。所以,当你写person = lines.split(',');时它会失败,因为你现在试图在数组上调用.split,而不是字符串。你想要这样的东西:person = lines[0].split(',');你需要另外一个循环来挖掘每个人。

&#13;
&#13;
  var data = 
`Chef,John Doe,40000,M,0
 Clerk,Jane Doe,20000,F,1
 Server,Joe Doe,30000,M,2`
  
  var lines = null;
  var person = null;

  $(function() {
    
      //split on new lines
      lines = data.split('\n');

      var len = lines.length;
      for(var i = 0; i < len; ++i){
        person = lines[i].split(',');

        var l2 = person.length;
        for(var x = 0; x < l2; ++x){
          console.log(person[x]);
        } 
      }
  });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;