Import JSON File Using AngularJS

Submitted by razormist on Thursday, August 13, 2020 - 20:50.
In this tutorial we will create Import JSON File using AngularJS. The program will upload and display the json object as a readable text format. Feel free to use this code and modify as you learn from it. To learn more about this, just follow the steps below.

Getting started:

First you will need to download & install the AngularJS here's the link https://angularjs.org/. And this is the link for the bootstrap that i used for the layout design https://getbootstrap.com/. Note: This code will only work if run in a local server.

Creating the Main Interface

This code contains the interface of the application. This code will render application and display the form. To do that just kindly write these block of code inside the text editor and save this as index.html. 
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myModule">
  3. 	<head>
  4. 		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
  5. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  6. 	</head>
  7. <body ng-controller="myController">
  8. 	<nav class="navbar navbar-default">
  9. 		<div class="container-fluid">
  10. 			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
  11. 		</div>
  12. 	</nav>
  13. 	<div class="col-md-3"></div>
  14. 	<div class="col-md-6 well">
  15. 		<h3 class="text-primary">Import JSON File Using AngularJS</h3>
  16. 		<hr style="border-top:1px dotted #ccc;"/>
  17. 		<div class="col-md-3">
  18. 			<button class="btn btn-primary" type="button" ng-click="importData()"><span class="glyphicon glyphicon-plus"></span> Import</button>
  19. 		</div>
  20. 		<div class="col-md-6">
  21. 			<table class="table table-bordered">
  22. 				<thead class="alert-info">
  23. 					<tr>
  24. 						<th>Firstname</th>
  25. 						<th>Lastname</th>
  26. 						<th>Address</th>
  27. 					</tr>
  28. 				</thead>
  29. 				<tbody style="background-color:#fff;">
  30. 					<tr ng-repeat="member in members | orderBy: 'lastname'">
  31. 						<td>{{member.firstname}}</td>
  32. 						<td>{{member.lastname}}</td>
  33. 						<td>{{member.address}}</td>
  34. 					</tr>
  35. 				</tbody>
  36. 			</table>
  37. 		</div>
  38. 	</div>
  39. <script src="js/angular.js"></script>	
  40. <script src="js/script.js"></script>	
  41. </body>	
  42. </html>
  43. </html>

Creating the Main Function

This code contains the main function of the application. The code will dynamically display the json data when import. To that just kindly copy and write these block of codes inside the text editor, then save it inside the js folder as shown below. script.js 
  1. var app = angular.module("myModule", [])
  2. 							   .controller("myController", function($scope){
  3.  
  4.  
  5. 								$scope.members = [
  6. 									{name: "John Smith", age: "21"},
  7. 									{name: "Claire Temple", age: "18"}
  8. 								];
  9.  
  10. 								$scope.members2 = [];
  11.  
  12. 								$scope.transfer = function(member){
  13. 									$scope.members2.push(member);
  14. 									$scope.members.splice($scope.members.indexOf(member), 1);
  15.  
  16. 								};
  17. 						});
data.json 
  1. [
  2. 	{"firstname": "John", "lastname": "Smith", "address": "New York"},
  3. 	{"firstname": "Claire", "lastname": "Temple", "address": "Racoon City"}
  4. ]
There you have it we successfully created a Import JSON File using AngularJS. I hope that this very simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Tags

Add new comment

About text formats
  • 364 views