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.

Sachila Ranawaka · Accepted Answer · 2017-03-08 10:27:44Z

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.

answered Mar 8, 2017 at 10:27

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

JGS Over a year ago

but i have to pass the converted the json object to my http.post

Sachila Ranawaka Over a year ago

it will convert the csv to json. u can access the converted json from the controller

JGS Over a year ago

no access to angular-csv-import package. need to check with other method.

Sachila Ranawaka Over a year ago

its a bower component package no need any permission. use bower to download it bower install angular-csv-import

JGS Over a year ago

tried that as well. it is blocked. no bower package can be used.

|

mohan rathour · Accepted Answer · 2017-03-08 10:56:59Z

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>

i have to upload file and then read its fields and convert it into json object array. don't have paste the csv file.
then you can directly push the cvs field data into an array.r

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related