AngularJS将数据插入JSON文件答案

【问题标题】：AngularJS inserting data to a JSON fileAngularJS将数据插入JSON文件
【发布时间】：2018-05-30 16:12:35
【问题描述】：

我有一个带有表单的 HTML 文件和具有以下结构的 json 文件：

[
        {
           "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 参数： ng-app="ajsprogram", ng-controller="outercont"。

如何通过提交功能从我的表单中添加新数据？

数据结构几乎相同：

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

【问题讨论】：

这个项目中是否涉及到数据库、Web 服务或 API，或者只是静态文件。通常我会说你会使用 ngResource 来调用 API 来发布数据。请提供更多信息
浏览器中运行的javascript代码不能直接写入web服务器上的文件。您应该考虑创建一个 API 以在服务器端运行代码或使用数据库来存储数据。
在阵列上使用.push。有关详细信息，请参阅MDN JavaScript Reference - Array push()。
这里只有静态文件（不涉及 API）。我在这里发现了类似的问题：stackoverflow.com/questions/37839731/… 他们使用 .push 方法，但是我不确定如何应用于 .json 文件本身。（我是 AngularJS 的新手）

标签： angularjs json

【解决方案1】：

您可以创建一个数组，然后将表单数据简单地推送到该数组中，如下所示：

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

【讨论】：

【解决方案2】：

谢谢，苏迪尔。这正是我想要的。我只需要将它放在单独的文件中。我有所有脚本的 script.js，它包含用于显示 airlines.json 文件中当前内容的代码：

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

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

我需要在那里编写 insertData 函数。这是我的带有表单的 .html 文件：

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

【讨论】：