我想使用angularjs在json文件中编辑和添加数据

时间:2016-09-01 06:45:21

标签: angularjs node.js fs

我是角色js.i google的新手,但没有找到有用的东西。

这是我的retails.json文件:

{

    "categories": [

        {

            "dept_id": "123",
            "category_name": "database",
            "category_discription": "list of database",
            "current time": "2016-07-21 06:27:17",
            "id": "1"

        },

        {
            "dept_id": "1234",
            "category_name": "debugging",
            "category_discription": "program debugger",
            "current time": "2016-07-21 06:32:24",
            "id": "2"

        },

        {

            "dept_id": "12345",
            "category_name": "system analyzer",
            "category_discription": null,
            "current time": "2016-07-21 06:33:23",
            "id": "3"
        }

    ]

}

我想使用angularjs创建一个表单,它将编辑和删除一些这个json文件。我可以这样做吗?...这个json文件也在我的loclhost上运行。我可以编辑并添加一些数据到这个json文件,如果它在localhost上运行?我使用节点js在localhost上运行这个文件。

这是我的nodejs文件,即在localhost上运行。

   var express = require('express');
  var app = express();
  var fs = require("fs");
  var http = require("http");
 var cors = require('cors');
 var router = require('router');

  app.all('/*', function (req, res, next) {
 res.header("Access-Control-Allow-Origin", "*");
 res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header("Access-Control-Allow-Headers", "X-Requested-With, content-    type");
 next();

});

   app.get('/categories', function (req, res) {
    fs.readFile( __dirname + "/" + "retails.json", 'utf8', function (err,   data) {
    console.log(data);

        res.send(data);
  });
})

  var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Example app listening at http://%s:%s", host, port)

})

这是我的test.htm文件:

       <!DOCTYPE html>
       <html>
       <style>
       table, th , td  {
       border: 1px solid grey;
       border-collapse: collapse;
       padding: 5px;
       }
       table tr:nth-child(odd) {
       background-color: #f1f1f1;
       }
       table tr:nth-child(even) {
       background-color: #ffffff;
       }
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8  /angular.min.js"></script>
      <body>

      <div ng-app="myApp2" ng-controller="customersCtrl3">
      <frame>
      <table border="1">
      <b><tn>categories</tn></b>
      <tr>
      <th>dept_id</th>
      <th>category_name</th>
      <th>category_discription</th>
      <th>current time</th>
      <th>Id</th>
      </tr>
      <tr ng-repeat="x in categories">
      <td>{{ x.dept_id }}</td>
      <td>{{ x.category_name }}</td>
      <td>{{ x.category_discription }}</td>
      <td>{{ x.currenttime }}</td>
       <td>{{ x.id }}</td>
       </tr>
       </table><br>
       <table border="1">
       <b><tn>departments</tn></b>
       <tr>
       <th>Name</th>
       <th>Address_info</th>
       <th>currenttime</th>
       <th>Id</th>
       </tr>
       <tr ng-repeat="x in departments">
       <td>{{ x.name }}</td>
       <td>{{ x.address_info }}</td>
       <td>{{ x.currenttime }}</td>
       <td>{{ x.id }}</td>
       </tr>
       </table><br>

       <table border="2">
       <tr>
       <th>dept_id</th>
       <th>phone</id>
       <th>mobile</id>
       <th>email</th>
       <th>web></th>
       <th>facebook</th>
       <th>twitter</th>
       <th>linkedin</th>
       <th>current time</th>
       <th>id</th>
       </tr>
       <tr ng-repeat="x in digital_marketing">
       <td>{{ x.dept_id }}</td>
       <td>{{ x.phone }}</td>
       <td>{{ x.mobile }}</td>
       <td>{{ x.email }}</td>
       <td>{{ x.web }}</td>
       <td>{{ x.facebook }}</td>
       <td>{{ x.twitter }}</td>
       <td>{{ x.linkedin }}</td>
       <td>{{ x.currenttime}}</td>
       <td>{{ x.id }}</id>
       </tr>
       </table>
       </div>

       <script>
     var app = angular.module('myApp2', []);
     app.controller('customersCtrl3', function($scope, $http) {
     $http.get("http://localhost:8081/categories").then(function (response) {
      $scope.categories = response.data.categories;//departments
     $scope.departments = response.data.departments;//digital_marketing
    $scope.digital_marketing = response.data.digital_marketing;
  });
  });
    </script>

     </body>
     </html>

现在我想通过使用angularjs.i来编辑和添加数据到json文件。想要显示如下:http://www.w3schools.com/angular/tryit.asp?filename=try_ng_w3css

1 个答案:

答案 0 :(得分:1)

使用require()需要json文件并执行一些修改:

var jsonObj = require('./test.json');

根据需要修改jsonObj,创建新对象或其他内容,然后编写文件:

fs.writeFileSync("test.json", jsonData);

注意:如果您计划解析大型JSON对象,请使用流式json解析器。