CODEWITHSUNDEEP
angularjsjson
smus
smus

Reputation: 143

AngularJS inserting data to a JSON file

I have an HTML file with a form and json file with the following structure:

[
        {
           "airline" : "British Airways",
           "hub"     : "LHR",
           "url"       : "http://britishairways.com",
           "callsign":"SPEEDBIRD"     
        },
        {
           "airline" : "Air France",
           "hub"     : "CDG",
           "url"       : "http://airfrance.com",       
           "callsign":"AIRFRANS"        
         },
        {
           "airline" : "Virgin Atlantic",
           "hub"     : "LGW",
           "url"       : "http://virginatlantic.com",
          "callsign":"VIRGIN"       
        },
        {
           "airline"   : "RyanAir",
           "hub"       : "DUB",
           "url"         : "http://ryanair.com",  
           "callsign":"RYANAIR"     
        },
        {
           "airline" : "ANA",
           "hub"     : "HND",
           "url"       : "http://ana.com.jp",
           "callsign":"ALL NIPPON"       
        },
        {
           "airline" : "Flydubai",
           "hub"     : "DXB",
           "url"       : "http://flydubai.com",
           "callsign":"SKY DUBAI"       
        }
]

AngularJS parameters: ng-app="ajsprogram", ng-controller="outercont".

How do I add a new data to it from my form through a function on submit?

The data structure is pretty much the same:

  "airline" : "Emirates",
   "hub"     : "DXB",
   "url"       : "http://emirates.com", 
   "callsign":"EMIRATES"

Upvotes: 2

Views: 2040

Answers (2)

smus
smus

Reputation: 143

Thanks, Sudhir. This is exactly what I wanted. I just need this to be in separate files. I've got script.js for all scripts and it contains the code for displaying what is currently in airlines.json file: 

var prg = angular.module('ajsprogram', []);

prg.controller("outercont", function($scope, $http) {
        $http.get('airlines.json').success(function(data){
            $scope.info = data;
            $scope.airlineorder = 'airline';
        });
});

And I need the insertData function written there. Here is my .html file with form:

<!DOCTYPE HTML>
<html ng-app="ajsprogram">
<head>
<title>Air Carriers</title>
   <script src="../lib/angular.js"></script>
   <script src="script.js"></script>
</head>
<style>
:root{text-align:center;}
</style>
<body>
<h2 align="center">Air Carriers</h2>
<div ng-controller="outercont">
<p align="center">
   <label>Search:</label><input type="search" ng-model="query"><br><br>
   <select ng-model="airlineorder">
         <option value="airline" selected>Airline Name</option>
         <option value="hub">Domestic Airport</option>
         <option value="callsign">Callsign</option>
   </select><br>
   <input type="radio" ng-model="direction" name="direction" checked>ASC<br>
  <input type="radio" ng-model="direction" name="direction" value="reverse">DESC
</p>
   <table align="center">
      <th>Airline</th><th>Hub</th><th>URL</th><th>Callsign</th>
      <tr ng-repeat="item in info | filter: query | orderBy: airlineorder: direction">
<td>{{item.airline}}</td><td>{{item.hub}}</td><td><a href="{{item.url}}">{{item.url}}</a></td><td>{{item.callsign}}</td>
</tr>
   </table>
</div>
<br>
New Airline Information:
<form onsubmit="newairline(an.value,hb.value,ur.value,cs.value)">
<table align="center">
<th>Airline:</th><th>Hub:</th><th>URL:</th><th>Callsign:</th>
<tr>
<td><input type="text" id="an" name="alname" value=""></td>
<td><input type="text" id="hb" size="3" maxlength="3" name="hub" value="" onkeyup="this.value=this.value.toUpperCase();"></td>
<td><input type="text" id="ur" name="url" value=""></td>
<td><input type="text" id="cs" name="cs" value="" onkeyup="this.value=this.value.toUpperCase();"></td>
</tr>
    <tr>
</table>
<input type="submit" value="new airline" style="cursor:pointer;">
</form>
</body>
</html>

Upvotes: 0

Sudhir Ojha
Sudhir Ojha

Reputation: 3305

You can create an array and simply push your form data in this array like following:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="ajsprogram" ng-controller="outercont">
Airline: <input type="text" ng-model="formData.airline"><br>
Hub: <input type="text" ng-model="formData.hub"><br>
Url: <input type="text" ng-model="formData.url"><br>
Call sign: <input type="text" ng-model="formData.callsign"><br>
<button ng-click="insertData()">Insert</button>
<br>
The Data Is : {{array}}
</div>

<script>
var app = angular.module('ajsprogram', []);
app.controller('outercont', function($scope) {
	
    $scope.array = [
        {
           "airline" : "British Airways",
           "hub"     : "LHR",
           "url"       : "http://britishairways.com",
           "callsign":"SPEEDBIRD"     
        },
        {
           "airline" : "Air France",
           "hub"     : "CDG",
           "url"       : "http://airfrance.com",       
           "callsign":"AIRFRANS"        
         },
        {
           "airline" : "Virgin Atlantic",
           "hub"     : "LGW",
           "url"       : "http://virginatlantic.com",
          "callsign":"VIRGIN"       
        },
        {
           "airline"   : "RyanAir",
           "hub"       : "DUB",
           "url"         : "http://ryanair.com",  
           "callsign":"RYANAIR"     
        },
        {
           "airline" : "ANA",
           "hub"     : "HND",
           "url"       : "http://ana.com.jp",
           "callsign":"ALL NIPPON"       
        },
        {
           "airline" : "Flydubai",
           "hub"     : "DXB",
           "url"       : "http://flydubai.com",
           "callsign":"SKY DUBAI"       
        }
	];
    
    $scope.insertData = function(){
    	$scope.array.push($scope.formData);
    }
});
</script>

</body>
</html>

Upvotes: 2

Related Questions