angularjs http post to json array at specific element

Question

I am trying to find a best way to update the file on the server with new elements. I tried looking into http post/put but I am getting an error and not sure exactly how to get this fixed. My http get method is working fine, so it's not an environment issue.

based on the comments here is the addition information and I have corrected the json file format as well.

Development environment: Visual Studio 2013, .net 4.5, iis

json data file sits on one of the folders under Visual studio solution. However I am only using angular features to develop this one page app, so no asp.net features in my code so far. I had to add to access the json file in the solution.

I have a simple car app for owners which loads from following array from file source using http get:

    owners: [{
            "name": "name1",
            "age": 29,
            "cars": [
                {
                    "carmodel": "tyota",
                    "make":  2000
                },
                {
                    "carmodel": "ford",
                    "make":  2001
                }
            ]
            },
            {
            "name": "person1",
            "age": 50,
            "cars": [
                {
                    "carmodel": "ford",
                    "make":  2011
                }
            ]
            }
        ]

from UI I am getting a new car object for say "person1"

car: {
        "carmodel": "BMW",
        "make":  2015
     }

I would like to add this to the file using httppost or any other best practice method.

I have a save function which throws post error: 405 (Method Not Allowed)

$scope.save = function(owner, car, $http)
{
   $scope.owners[1].cars.push(car); 
   // above is hard coded, how can filter owners with owner object?
   $http.post('url',$scope.owners);
}

I am wondering what is the best practice update file on server. any help on this would be grateful.

did you try to use the method PUT? instead of POST? you could check the sort of protocol accepted by the server. — Hugo S. Mendes, Apr 20 '16 at 16:35
I get the same error when using PUT method. 405 (Method not allowed). Project is on Visual Studio. — hss, Apr 20 '16 at 18:09

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

This issue was solved by enabling CORS. Here is the link for another stackoverflow question: jQuery .ajax() POST Request throws 405 (Method Not Allowed) on RESTful WCF

edited May 23 '17 at 12:07

Community

1
1

answered Apr 21 '16 at 21:02

hss

317
1
2
13

score 0 · Answer 2 · answered Apr 20 '16 at 18:42

For starters, your JSON is not correct as you are defining an owners object with duplicated keys/variables. I think you want owners to be an array like your cars.

If we're talking best practices, I wouldn't recommend saving a file on your server and updating it with a POST request because that would allow anyone to POST to your server and mess with your file. I would instead use a database or just keep your JSON in memory on the server while it is running. Databases to look into include MySQL and MongoDB. They're pretty accessible and have a lot of community support.

In order to better understand your question, we need to know what tool/technology you are using to provide this endpoint. (Node/.NET/etc.) Knowing the OS is also helpful, but not necessarily important.

I understand your concerns with in memory database. I am trying to build a simple html website with angular and try to use it under the framework for iphone or andriod app. The data source is just one json file like you see above. Thank you for your answer. — hss, Apr 20 '16 at 21:13

score 0 · Answer 3 · answered Apr 20 '16 at 19:52

Ideally owners should be an Array of objects, something like:

owners: [{
      "name": "name1",
      "age": 29,
      "cars": [
        {
            "carmodel": "tyota",
            "make":  2000
        },{
            "carmodel": "ford",
            "make":  2001
        }]
    }, {
      "name": "person1",
      "age": 50,
      "cars": [
        {
            "carmodel": "ford",
            "make":  2011
        }]
}];

Then lets say you need to update the details of person named: person1, adding a new car to the list, do as follows:

car = {"carmodel": "anymodel", "make": 2012}; $scope.owners[1].cars.push(car); $http.post(url, $scope.owners);

Also, one must follow RESTful APIS best practices and use PATCH for updating any values Each owner could have a different endpoint, something like /owner/:id

Then simply $http({method:'PATCH', url:'/owner/1', data:data})

Thanks for pointing out the issue with owners file. I have fixed the format in the original post - it was a typo on my side. Also I am doing the same what you mentioned: car = {"carmodel": "anymodel", "make": 2012}; $scope.owners[1].cars.push(car); $http.post(url, $scope.owners); but it is throwing an error 405 (Method Not Allowed). My http get method works fine though. — hss, Apr 20 '16 at 21:10

angularjs http post to json array at specific element

3 Answers3