Angular.js를 사용하여 업로드 된 csv 파일 객체를

으로 변환했습니다.이 변환과 관련된 제안을 시도했습니다. 파일을 파일 객체로 읽었으므로 이제 파일 객체를 angularjs를 사용하여 json 객체 배열로 변환해야합니다.Angular.js를 사용하여 업로드 된 csv 파일 객체를

<!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>

: 아래

(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 파일입니다

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

respones 변수는 읽기 file.Below이 컨트롤러 파일이 들어 다음과 같이 읽기 파일 객체입니다 이제 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입니다. 당신이 JSON에 CVS를 구현하려면 다음

출처

2017-03-08 10:27:44

을 검색 할 수 있습니다하지만 난 내 http.post로 변환 된 JSON 개체를 통과해야 – JGS

그러면 csv가 json으로 변환됩니다. 컨트롤러 –

에서 변환 된 json에 액세스하면 angular-csv-import 패키지에 액세스 할 수 없습니다. 다른 방법으로 확인해야합니다. – JGS

데모 예를

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 파일 객체를

답변

관련 문제