Adding a JSON object using ng-submit + ng-model

Question

How do I properly add(push) a object(nest) to a json using angular.

See live working demo on: JSbin Link

I have a factory of Airports with a particular structure:

angApp.factory("Airports", function () {
    var Airports = {};
    Airports.detail = {
        "PDX": {
            "code": "PDX",
            "name": "Portland International Airport",
            "city": "Portland"
        },
        "STL": {
            "code": "STL",
            "name": "Lambert-St. Louis International Airport",
            "city": "St. Louis"

        },
        "MCI": {
            "code": "MCI",
            "name": "Kansas City International Airport",
            "city": "Kansas City"

        }
    };
    return Airports;
});

Linked with a Controller: How do i write a proper method to push the input to Airport.detail?

.controller("AirportsCtrl", function ($scope, Airports) {
    $scope.formURL = "views/_form.html";
    $scope.currentAirport = null;
    $scope.airports = Airports;
    $scope.setAirport = function (code) {
    $scope.currentAirport = $scope.airports.detail[code];
    };

  $scope.addAirport = function() {
    $scope.airports.push();
  };


});

HTML: what do i put into ng-model to push an objected into Airport.details properly Add Airport ID:

       <div class="form-group">
         <label >code:</label><br>
        <input class="form-control" type="text" placeholder="eg. PDX">
      </div>

      <div class="form-group">
        <label>Name:</label><br>
        <input class="form-control" type="text" ng-model="" placeholder="eg. Portland Intl. Airport">
      </div>

      <div class="form-group">
        <label>City</label><br>
        <input  class="form-control"type="text" ng-model="" placeholder="eg. Portland">
      </div>
  <input class="btn btn-primary" type="submit">
    </form>

joemaller · Accepted Answer · 2014-01-05 04:06:31Z

There are a few issues, but the biggest stopper is that the factory is defining an object, not an array. That's why the push won't work.

You're going to need some data to send from the form, so I bound models for your form elements in the HTML tags:

<form ng-submit="addAirport()" ng-model="ap" >
    <h4 >Add Airport</h4>
    <div class="form-group">
        <label>ID:</label><br>
        <input class="form-control" type="text" ng-model="ap.id" placeholder="eg. PDX">
    </div>

Additional form elements were given models to match, ap.code, ap.name and ap.city. Binding the top-level ap object saves some code later on.

The addAirport function looks like this:

$scope.addAirport = function() {
  $scope.airports.detail[$scope.ap.id] = $scope.ap;
  delete($scope.ap);
};

That simply adds the $scope.ap (form) data to your $scope.airports.detail object. (the detail object contained the collection). The delete command resets the form.

Here's an updated jsbin, adding airports now works: http://jsbin.com/OGipAVUF/11/edit

Joel Skrepnek · Accepted Answer · 2014-01-05 03:52:20Z

First, bind each of the form fields to your scope:

<div class="form-group">
     <label >code:</label><br>
    <input class="form-control" ng-model="code" type="text" placeholder="eg. PDX">
  </div>

  <div class="form-group">
    <label>Name:</label><br>
    <input class="form-control" type="text" ng-model="name" placeholder="eg. Portland Intl. Airport">
  </div>

  <div class="form-group">
    <label>City</label><br>
    <input  class="form-control"type="text" ng-model="city" placeholder="eg. Portland">
  </div>

Then, add a new hash value to the detail object:

$scope.addAirport = function() {
    $scope.airports.detail[$scope.code] = {
        code: $scope.code,
        name: $scope.name,
        city: $scope.city
    }
});

Some basic validation would be appropriate, so that existing 'ids' were not overridden.

Collectives™ on Stack Overflow

Adding a JSON object using ng-submit + ng-model

How do I properly add(push) a object(nest) to a json using angular.

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

How do I properly add(push) a object(nest) to a json using angular.

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related