This code snippet showcases a simple AngularJS application that allows you to export JSON data to a CSV file with ease. The application utilizes two modules, ngSanitize and ngCsv, to accomplish this task seamlessly.
In the code, you’ll find a module named “csvApp” and a corresponding controller called “csvController”. Inside the controller, an array named “datos” is defined, containing sample data representing personal information. Each object in the array includes properties that you can set according to your JSON data.
By leveraging the power of ngCsv, you can effortlessly convert this JSON data into a downloadable CSV file. Feel free to explore the code and discover how you can enhance your AngularJS applications by exporting JSON data to CSV files effortlessly.
How to Export JSON Data To CSV File in AngularJS
First of all, load the Bootstrap CSS for the basic design of the table generated through JSON data. (Optional)
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
Create the HTML structure for JSON table as follows:
<body ng-app="csvApp">
<br>
<div ng-controller="csvController" class="container" ng-cloack>
<h1>Exportar JSON a CSV utilizando Angular JS</h1>
<br>
<div class="panel panel-default">
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Primer Nombre</th>
<th>Segundo Nombre</th>
<th>Primer Apellido</th>
<th>Segundo Apellido</th>
<th>Fecha Nacimiento</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='reg in datos'>
<td>{{reg.id}}</td>
<td>{{reg.primerNombre}}</td>
<td>{{reg.segundoNombre}}</td>
<td>{{reg.primerApellido}}</td>
<td>{{reg.segundoApellido}}</td>
<td>{{reg.fechaNacimiento}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<button type="button" class="btn btn-default" ng-csv="datos" filename="Datos.csv" csv-header="['Id', 'Primer Nombre', 'Segundo Nombre', 'Primer Apellido', 'Segundo Apellido', 'Fecha Nacimiento']" charset="utf-8"><span class="glyphicon glyphicon-download-alt"> </span>Descargar CSV</button>
<br>
<br>
<p>
<small>
Más información y otros post en <a href="http://wanderlp.com" target="_blank">wanderlp.com</a>
</small>
</p>
</div>
</body>
Style the table using following CSS styles:
.table > tbody > tr:hover {
background-color: #F2F2F2;
cursor: pointer;
}
Load the following scripts before closing the body tag:
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script> <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js'></script> <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-sanitize.min.js'></script> <script src='//cdnjs.cloudflare.com/ajax/libs/ng-csv/0.3.3/ng-csv.min.js'></script>
Finally, add the following JavaScript function to your project. To add your own JSON data to the code, you can modify the “datos” array within the controller.
var app = angular.module("csvApp", ["ngSanitize", "ngCsv"]);
app.controller("csvController", ["$scope",
function($scope) {
$scope.datos = [{
id: 1,
primerNombre: 'Juan',
segundoNombre: 'Mario',
primerApellido: 'Perez',
segundoApellido: 'Maldonado',
fechaNacimiento: '23-12-1985'
}, {
id: 2,
primerNombre: 'Jorge',
segundoNombre: 'Alfonzo',
primerApellido: 'Quinto',
segundoApellido: 'Marroquin',
fechaNacimiento: '15-01-1988'
}, {
id: 3,
primerNombre: 'Carlos',
segundoNombre: 'Alberto',
primerApellido: 'Vargas',
segundoApellido: 'Martinez',
fechaNacimiento: '09-03-1990'
}, {
id: 4,
primerNombre: 'Mario',
segundoNombre: 'Alvaro',
primerApellido: 'Hernadez',
segundoApellido: 'Morales',
fechaNacimiento: '23-02-1984'
}, {
id: 5,
primerNombre: 'Marlon',
segundoNombre: 'Federico',
primerApellido: 'Lopez',
segundoApellido: 'Padilla',
fechaNacimiento: '01-03-1976'
}, {
id: 6,
primerNombre: 'Daniel',
segundoNombre: 'Francisco',
primerApellido: 'Herrera',
segundoApellido: 'Perdomo',
fechaNacimiento: '22-03-1989'
}, {
id: 7,
primerNombre: 'Cesar',
segundoNombre: 'Jaime',
primerApellido: 'Arroche',
segundoApellido: 'Pedrosa',
fechaNacimiento: '18-02-1987'
}];
}
]);
That’s all! hopefully, you have successfully integrated this export JSON to CSV file function into your project. If you have any questions or suggestions, feel free to comment below.
