Thursday, 27 April 2017

Sending Data from Angular Front End to NodeJS in a json file

I am currently trying to connect an AngularJS front end to a NodeJS back end application. The ideal goal is to read, write, edit and delete data off a json file, not a database. I have tried setting up the post method on both sides but it says that my json file containing the information is 404.

I have never before implemented a back end after the front end was created, so I am quite unsure how to proceed with this.

This is my Angular Controller:

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

app.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

app.controller('dashCtrl', function($scope, $http){

   $http.get('/Alpha/json/details.json').then(function (response) {
        $scope.details = response.data;
        console.log(details);
    });

   $scope.newDetails = {};

    $scope.selectItem = function(item){
        console.log(item);
        $scope.clickedDetails = item;
    };

    $scope.updateItem = function(){

    };

    $scope.deleteItem = function(){
        $scope.details.splice($scope.details.indexOf($scope.clickedDetails), 1);
    };

   $scope.saveItem = function(){        
        $scope.details.push({ 'id':$scope.id, 'system': $scope.system, 'date':$scope.date, 'priority':$scope.priority, 'description':$scope.description, 'status':$scope.status });
        // Writing it to the server
        //      
        var item = {
                id:$scope.id, 
                system: $scope.system, 
                date:$scope.date, 
                priority:$scope.priority, 
                description:$scope.description, 
                status:$scope.status
        };  

        $http.post('../json/details.json', item).then(function(item, status) {
            console.log('Data posted successfully');
        });

        // Making the fields empty
        //
        $scope.id = ''; 
        $scope.system = '';
        $scope.date = '';
        $scope.priority = '';
        $scope.description = '';
        $scope.status = ''; 
    };

});

The NodeJS I am running at the back:

var express = require('express');
var app = express();
var bodyParser  = require('body-parser');

app.use(express.static(__dirname + '/'));

app.post('/Alpha/pages/json/details.json', function(req, res) {
    console.log(details);
    res.end();
});

app.listen(3000);

My HTML form:

  <table class="table table-responsive">

                                        <thead style="background-color:#002244; color:#FFFFFF">
                 <tr>
                 <th > Issue </th>
                 <th > System </th>
                 <th > Date </th>
                <th > Priority </th>
                <th > Description </th>
                <th > Status </th>
                <th style="background:white;">
             <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" value="Add +" style=" border-color:#FFBE00; color: black;background-color:#FFBE00;">Add</button></th>
                       </tr>
             </thead>
               <tbody>
        <tr ng-repeat=" item in details ">
           <td > </td>
          <td >  </td>
          <td > </td>
           <td class="-priority">  </td>
            <td > </td>
             <td >  </td>
             <td>
       <a href ="#" data-toggle="modal" data-target="#myModalDelete" ng-click="selectItem(item)">Delete</a>
     <a href ="#" data-toggle="modal" data-target="#myModalEdit" ng-click="selectItem(item)">Edit</a>
              </td>
                </tr>
             </tbody>
            </table>

Why am I receiving a 404 on my json file when I am trying to post to it? How can I specify from the post method in NodeJS to use the one in Angular?



via ZombieChowder

No comments:

Post a Comment