2016-10-14 1 views
1

Avoir une fonction qui convertit le fichier * .csv en JSON. En fonction, je peux imprimer ce fichier JSON à console.log console.log (jsonner); mais je ne peux pas le transférer au contrôleur angulaire. $ scope.names = jsonner; J'ai 2 problèmes: comment wait fuction, et comment rend var jsonner global.Comment obtenir var dans l'objet global après la fin de la fonction

function csvJSON(csv){ 

    var lines=csv.split("\n"); 
    var result = []; 
    var headers=lines[0].split(","); 

    for(var i=1;i<lines.length;i++){ 

     var obj = {}; 
     var currentline=lines[i].split(","); 

     for(var j=0;j<headers.length;j++){ 
      obj[headers[j]] = currentline[j]; 
     } 

     result.push(obj); 

    } 

    //return result; //JavaScript object 
    return JSON.stringify(result); //JSON 
} 

function processFiles(files) { 
    var file = files[0]; 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
    // Когда это событие активируется, данные готовы. 
    // Вставляем их в страницу в элемент <div> 
    var output = document.getElementById("fileOutput"); 
    output.textContent = e.target.result; 
    content = output.textContent; 
    jsonner = csvJSON(content); 
    console.log(jsonner); 
}; 
    reader.readAsText(file); 

} 




var SearchApp = angular.module('SearchApp',[]); 
SearchApp.controller('ctrl2', ['$scope', function($scope){ 
    // Here the array would be your response.text: 
    $scope.names = jsonner; 

}]); 
+0

Object.assign (de jsonner global,); Cela fera jsonner aglobal et l'utiliser comme global.jsonner dans votre contrôleur –

+0

ReferenceError Uncaught: jsonner n'est pas défini –

+0

où je dois le mettre? –

Répondre

0

Vous êtes $scope.names pointe vers la jsonner d'origine en mémoire. Vous créez un nouvel objet avec jsonner = csvJSON(content); car il renvoie le tableau result. Vous auriez à modifier le tableau original pour l'obtenir pour mettre à jour comme vous le souhaitez.

Voici une démonstration de la logique de travail pour vous aider à démarrer: Plunker Demo

Malheureusement file entrées ne fonctionnent pas avec ng-change, mais il y a un couple des solutions de contournement. Vous pouvez le faire:

<input id="fileInput" type="file" ng-model="files" onchange="angular.element(this).scope().processFiles(this)">

ou vous pouvez câbler l'événement à l'aide element.on('change', processFiles) dans une directive personnalisée. Voici ce que je faisais:

<body ng-controller="ctrl2"> 
    <input id="fileInput" type="file" ng-model="files" onchange="angular.element(this).scope().processFiles(this)"> 
    <div>{{ output }}</div> 

    <div ng-repeat="todo in names track by $index" class="repeat"> 
     <div class="comname">{{todo.Name}}</div> 
     <div class="price">{{todo.Price}}</div> 
     <div class="change">{{todo.Change}}</div> 
    </div> 
</body> 

et la logique:

var SearchApp = angular.module('SearchApp', []); 
SearchApp.controller('ctrl2', ['$scope', function ($scope) { 
    $scope.processFiles = function (element) { 
     var file = element.files[0]; 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
     // Need to notify angular of this event using $apply 
     $scope.$apply(function() { 
      // Когда это событие активируется, данные готовы. 
      // Вставляем их в страницу в элемент <div> 
      var output = document.getElementById("fileOutput"); 
      $scope.output = e.target.result; 
      jsonner = csvJSON(e.target.result); 
      console.log(jsonner); 
      $scope.names = jsonner; 
     }); 
     }; 

     reader.readAsText(file); 
    }; 


}]); 
+0

Pouvez-vous montrer comment faire cela? –

+0

Où sont appelées ces fonctions? – Zach

+0

{{todo.Name}}
{{todo.Price}}
{{todo.Change}}