2016-11-08 3 views
1

интересный вопрос для вас. Я пытаюсь найти лучший способ проанализировать информацию из моего файла .csv, чтобы у меня были необработанные данные и можно проводить сравнения.JavaScript Разбор данных в объект

То, что я пытаюсь сделать прямо сейчас сделать объект для каждого человека из данных, которые получают разобранные в Так что мой файл 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 с 2 поступает ниже в том же окне при использовании window.alert(var[number])

Тогда я понимаю, ну это на самом деле не будет работать в любом случае, я хотите, чтобы каждый человек был собственным объектом. Поэтому я хочу, чтобы каждый person имел свои собственные переменные: position, name, salary, gender, category

Я посмотрел на него, и я получаю довольно много способов его создания, но никто не принимает информацию через файл, но вручную определяет его прямо там и там , Так может ли кто-то помочь мне с этим? Должен ли я сделать какой-то цикл, а потом что-то интересное, как:

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]; 
} 

Честно говоря, не слишком уверен, так что любая помощь с этим было бы здорово. Благодаря!


Edit: С помощью Лукас, где я в настоящее время:

<!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 
+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'); 
 
    \t 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(','); 
 
    \t \t var tmpPerson = {}; 
 
    \t \t for (var n = 0; n<person.length; n++){ 
 
    \t \t \t tmpPerson[properties[n]] = person[n]; 
 
    \t \t } 
 
       people.push(tmpPerson); 
 
    
 
      } 
 
      console.log(people) 
 
    
 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Если вы используете запрос для извлечения данных из файла, то вы должны поставить регистрацию/рендеринг в отдельной функции, которую вы называете после завершения $.get запроса (или в самом запросе $.get). JavaScript выполняет эти запросы асинхронно, поэтому вы регистрировали результат people до того, как любые значения были сдвинуты на people. Приведенная ниже реализация должна решить вашу проблему. Кажется, что вы только начинаете ваше приключение с JS, так что я рекомендую почитать об этом: https://blog.risingstack.com/asynchronous-javascript/

<!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); 
       } 
       alert(people[1]["name"]); 
       render(); 
      }); 



      }); 


      function render(){ 
      alert(people[1].name); 
      } 
     </script> 
    </body> 
</html> 
+0

О, вау, глупый ... Да, это имеет большой смысл. Теперь можно каким-то образом включить объект, о котором я говорил в этом? Было бы так же глупо, как мой цикл for в конце моего вопроса (просто повторить через массив строк, чтобы разбить это). –

+0

Также, когда я добавил ваш цикл for, я получаю неопределенное значение, когда я .alert person [0] –

+0

вы можете реализовать цикл, но тогда ваши свойства объекта больше не будут содержать имена, которые вы хотите, чтобы они переносились, если у вас не было отдельного массив свойств, который вы можете сопоставить каждому. –

0

lines = data.split('\n'); возвращает массив. Итак, когда вы пишете person = lines.split(',');, он будет терпеть неудачу, потому что теперь вы пытаетесь вызвать .split на массив, а не на строку. Вам нужно что-то вроде этого: person = lines[0].split(',');, и вам нужен еще один цикл, чтобы копать каждого человека.

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]); 
 
     } 
 
     } 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Смежные вопросы