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

Question

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 > {{item.id}}</td>
            <td > {{item.system}} </td>
            <td > {{item.date}}</td>
            <td class="{{item.priority}}-priority"> {{item.priority}} </td>
            <td > {{item.description}}</td>
            <td > {{item.status}} </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?

Answer 1

I think your problem is that you put the filename and extension in your API .... trey to give End-Point URL... so for example:

in Angular cllas:

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

In your Node.js

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