Unable to push data into JSON file AngularJS

Question

i have just started learning Angular js. I find difficulty in adding the data to an existing JSON file.

This is my JSON file

{"response":[ {
"Cust_Fname":"Jack",
"Cust_Lname":"Nicolson",
"Cust_Dob":"24/09/1992",
"Cust_Mob":"0987654321",
"Cust_Email":"[email protected]"
},
{
"Cust_Fname":"tom",
"Cust_Lname":"cruise",
"Cust_Dob":"19/01/1990",
"Cust_Mob":"1234567890",
"Cust_Email":"[email protected]",
}
]
}

This is my AngularJS code to push data

$scope.saveContact = function(contact){
$http.post('/data/Cust_Dtls.json',contact).success(function(data, status, headers, config){
                console.log(data)});
            }

This is my HTML file

<ion-content  class="item-noborder base-bg" overflow-scroll="true" padding="true">
        <div class="row" >
            <div class="col-50 pane-top-padding-20" style="padding-left:10px"><a class="button button-icon button-positive ion-arrow-left-c" href="#/tab/contacts">&nbsp;Back to Contacts</a></div>
            <div class="col-50 pane-top-padding-20 text-right"><a class="button button-icon button-positive ion-checkmark text-right" href="#/tab/contacts" ng-click="saveContact(contact)">&nbsp;Save</a></div>
        </div>



    <div  id="contact-div">

        <label class="item">
            <span class="input-label">First Name</span>
            <input type="text" placeholder="First Name" ng-model="contact.Cust_Fname">
        </label>
        <label class="item">
            <span class="input-label">Last Name</span>
            <input type="text" placeholder="Last Name" ng-model="contact.Cust_Lname">
        </label>
        <label class="item">
            <span class="input-label">Email</span>
            <input type="text" placeholder="Email" ng-model="contact.Cust_Email">
        </label>
        <label class="item">
            <span class="input-label">Phone</span>
            <input type="text" placeholder="Phone" ng-model="contact.Cust_Mob">
        </label>
        <label class="item">
            <span class="input-label">Date Of Birth</span>
            <input type="text" placeholder="DOB" ng-model="contact.Cust_Dob">
        </label>
    </div>
</ion-content>

I am able to read the data using $http.get but i am unable to push data and i don't have any errors popping up. so i am unable to figure on what to do.

Thanks

V31 · Accepted Answer · 2015-03-10 09:27:22Z

1

I think you mean the post verb of http instead of push

The format is taken from angular site:

// Simple POST request example (passing data) :
$http.post('/someUrl', {msg:'hello word!'}).
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

So taking your code you need to push contact like this:

$http.post('/data/Cust_Dtls',{contact:contact}).success(function(data, status, headers, config){
            console.log(data)});
}

You need to post to a url instead of a json flat file.

edited Mar 10, 2015 at 9:27

answered Mar 10, 2015 at 6:14

V31

7,6643 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

V31 Over a year ago

@Venkatesh: updated the answer to have the contact sent to server

V31 Over a year ago

@Venkatesh: have you created the contact object?

Venkatesh Over a year ago

yup I have created it.

V31 Over a year ago

you have the handle the post using a rest api url and not to a json. editing the answer...

Venkatesh Over a year ago

oh yeah. just remembered it. thanks. So. then how do it insert it to an json file.? but then '$http.get' worked

|

Amrit Sohal · Accepted Answer · 2016-04-03 19:24:37Z

0

You are doing same mistake I was doing. you trying to post data into local file using $http service.You cannot do this. $http service is for server-client communication. Use either localstorage or sqlite like services.

Hope this helps

answered Apr 3, 2016 at 19:24

Amrit Sohal

773 silver badges9 bronze badges

Collectives™ on Stack Overflow

Unable to push data into JSON file AngularJS

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related