使用Angular.js將上傳的csv文件對象轉換爲json對象

我已經嘗試了與此轉換相關的建議。我已經將文件讀入文件對象，現在我必須使用angularjs將文件對象轉換爲json對象數組。讀取文件對象如下：使用Angular.js將上傳的csv文件對象轉換爲json對象

id,category,type,name,value,isEnabled,key 
1,kk,t,dsa,3,FALSE,A 
2,jj,h,gdfjkl,5,FALSE,A 
3,jj,u,hdg,9,FALSE,A 
4,jj,p,rwe,7,FALSE,A

的階躍響應變量包含讀file.Below是控制器文件：

(function() { 
'use strict'; 
var myApp = angular.module('app'); 
myApp.controller('FileUploadController', function ($scope, fileUploadService) { 

    $scope.uploadFile = function() { 
     var file = $scope.myFile; 
     console.log("file::"+file); 
     var fileVal=[{}]; 
     /* var uploadUrl = "../server/service.php", //Url of webservice/api/server*/ 
     var uploadUrl = "../server/Book1.csv", 
      promise = fileUploadService.uploadFileToUrl(file, uploadUrl); 
console.log("promise"+promise); 

     promise.then(function (response) { 
      $scope.serverResponse = response; 
console.log("serverResponse::"+response); 
var splitvar=","; 
var splitnewline="\n"; 
for(var i=0;i<(response!=null);i++){ 
if(response[i]==splitvar){ 
    fileVal[i]=response[i]; 
} 
else if(response[i]==splitnewline){  
}   
    console.log(fileVal[i]); 
}; 
console.log("length:"+response.length); 
     }, function() { 
      $scope.serverResponse = 'An error has occurred'; 
     }) 
    }; 
}); 
})();

下面是我的HTML文件：

<!DOCTYPE html> 
<html lang="en" ng-app="app"> 
<head> 
<meta charset="UTF-8"> 
<title>File Upload Demo</title> 
<script src="../scripts/angular.min.js"></script> 
<script type="text/javascript" src="app.module.js"></script> 
<script type="text/javascript" src="controllers.js"></script> 
<script type="text/javascript" src="directives.js"></script> 
<script type="text/javascript" src="services.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body ng-controller="FileUploadController"> 
<h2>File Upload Demo</h2> 

<div class="panel panel-default"> 
    <div class="panel-body"> 
     <form> 
      <div class="form-group"> 
       <label for="myFileField">Select a file: </label> 
       <input type="file" demo-file-model="myFile" class="form-control" id ="myFileField"/> 
      </div> 
      <button ng-click="uploadFile()" class = "btn btn-primary">Upload File</button> 
     </form> 
    </div> 
</div> 
<div>{{serverResponse}}</div> 
</body> 
</html>

現在我無法將其轉換爲json對象。

預期輸出樣本：

[{"id":1,"category":"kk","type":"t","name":"dsa","value":3,"isEnabled":"FALSE","key":"A"}, 
{"id":2,"category":"jj","type":"h","name":"gdfjkl","value":5,"isEnabled":"FALSE","key":"A"}, 
{"id":3,"category":"jj","type":"u","name":"hdg","value":9,"isEnabled":"FALSE","key":"A"}, 
{"id":4,"category":"jj","type":"p","name":"rwe","value":7,"isEnabled":"FALSE","key":"A"}]

大約相同的任何想法。

來源

2017-03-08 JGS

有一些很好的指令可用於這樣的任務。你不必再一次實現所有的東西。

我強烈推薦angular-csv-import，這裏是demo。

來源

2017-03-08 10:27:44

但我要轉換的JSON對象傳遞給我的http.post – JGS

它會將csv轉換爲json。你可以從控制器 –

訪問轉換後的json不訪問angular-csv-import軟件包。需要用其他方法檢查。 – JGS

如果你要實現的CVS到JSON然後找到下面演示的例子

https://jsfiddle.net/mohan_rathour/Lt3wjgfx/7/

// This will parse a delimited string into an array of 
 
// arrays. The default delimiter is the comma, but this 
 
// can be overriden in the second argument. 
 

 
function CSVToArray(strData, strDelimiter) { 
 
    strDelimiter = (strDelimiter || ","); 
 
    var objPattern = new RegExp((
 
    // Delimiters. 
 
    "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" + 
 
    // Quoted fields. 
 
    "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" + 
 
    // Standard fields. 
 
    "([^\"\\" + strDelimiter + "\\r\\n]*))"), "gi"); 
 
    var arrData = [[]]; 
 
    var arrMatches = null; 
 
    while (arrMatches = objPattern.exec(strData)) { 
 
     var strMatchedDelimiter = arrMatches[1]; 
 
     if (strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter)) { 
 
      arrData.push([]); 
 
     } 
 
     if (arrMatches[2]) { 
 
      var strMatchedValue = arrMatches[2].replace(
 
      new RegExp("\"\"", "g"), "\""); 
 
     } else { 
 
      var strMatchedValue = arrMatches[3]; 
 
     } 
 
     arrData[arrData.length - 1].push(strMatchedValue); 
 
    } 
 
    return (arrData); 
 
} 
 

 
function CSV2JSON(csv) { 
 
    var array = CSVToArray(csv); 
 
    var objArray = []; 
 
    for (var i = 1; i < array.length; i++) { 
 
     objArray[i - 1] = {}; 
 
     for (var k = 0; k < array[0].length && k < array[i].length; k++) { 
 
      var key = array[0][k]; 
 
      objArray[i - 1][key] = array[i][k] 
 
     } 
 
    } 
 

 
    var json = JSON.stringify(objArray); 
 
    var str = json.replace(/},/g, "},\r\n"); 
 

 
    return str; 
 
} 
 

 
$("#convert").click(function() { 
 
    var csv = $("#csv").val(); 
 
    var json = CSV2JSON(csv); 
 
    $("#json").val(json); 
 
});

#heading { font-size: x-large; font-weight: bold; } 
 
.text { width: 99%; height: 200px; } 
 
.small { font-size: small; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="heading">CSV to JSON Converter</p> 
 
    <p class="small"><a href="https://jsfiddle.net/mohan_rathour/Lt3wjgfx/5/" target="_blank">JSON to CSV Converter</a> 
 
    <hr /> 
 
    <p>Paste Your CSV Here:</p> 
 
    <textarea id="csv" class="text">"Id","UserName" 
 
"1","Mohan" 
 
"2","Sohan" 
 
"1","Abhi"</textarea> 
 
    <br /> 
 
    <button id="convert">Convert to JSON</button> 
 
    &nbsp;&nbsp; 
 
    <textarea id="json" class="text"></textarea>

來源

2017-03-08 10:43:13

我必須上傳文件，然後閱讀它的字段並將其轉換到json對象數組中。不要粘貼csv文件。 – JGS

然後你可以直接將cvs字段數據推送到一個array.r –

使用Angular.js將上傳的csv文件對象轉換爲json對象

回答

相關問題