convert uploaded csv file object to json object using Angular.js

Question

I have tried the suggestions related to this conversion.I have read the file into file object and now I have to convert the file object into a json object array using angularjs. The read file object is as follows:

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

The respones variable contains the read file.Below is the controller file:

(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';
        })
    };
});
 })();

Below is my html file:

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

Now i am not able to convert the same into the json object.

Expected output sample:

[{"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"}]

Any idea about the same.

Answer 1

There are some nice directives available for such a tasks. You don't have to implement all the things all over again.

I highly recommend angular-csv-import and here is demo of that.

Answer 2

If you want to implement the cvs to json then find below demo example

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>

convert uploaded csv file object to json object using Angular.js

Question

2 answers

solution1
0 2017-03-08 10:27:44

solution2
0 2017-03-08 10:43:13

convert uploaded csv file object to json object using Angular.js

Question

2 answers

solution1 0 2017-03-08 10:27:44

solution2 0 2017-03-08 10:43:13

solution1
0 2017-03-08 10:27:44

solution2
0 2017-03-08 10:43:13