Utilizing ng-submit and ng-model to include a JSON object

Question

Utilizing ng-submit and ng-model to include a JSON object

How can I correctly insert(add) an object(nest) into a JSON using Angular?

Check out the live demo here: JSbin Link

I have a factory for Airports with a specific 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;
});

Connected to a Controller: How do I create a proper method to add the input to Airport.details?

.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 should go in the ng-model to properly add an object into Airport.details 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>

javascript json angularjs angularjs-directive yeoman

Answer 1

Answer №1

One major issue is that the factory is defining an object instead of an array, which is why the push method won't work as expected.

In order to send data from the form, you'll need to bind models for your form elements directly 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>

Make sure to assign models like ap.code, ap.name, and

ap.city</code to match each form element. By binding these elements to a top-level <code>ap

object, you can save code later on.

The addAirport function should be defined as follows:

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

This function adds the form data stored in $scope.ap to the $scope.airports.detail object, with the delete command resetting the form afterwards.

To see the updated functionality for adding airports in action, check out this jsbin: http://jsbin.com/OGipAVUF/11/edit

Answer 2

One major issue is that the factory is defining an object instead of an array, which is why the push method won't work as expected.

In order to send data from the form, you'll need to bind models for your form elements directly 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>

Make sure to assign models like ap.code, ap.name, and

ap.city</code to match each form element. By binding these elements to a top-level <code>ap

object, you can save code later on.

The addAirport function should be defined as follows:

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

This function adds the form data stored in $scope.ap to the $scope.airports.detail object, with the delete command resetting the form afterwards.

To see the updated functionality for adding airports in action, check out this jsbin: http://jsbin.com/OGipAVUF/11/edit

Answer 3

Answer №2

Begin by connecting all the form fields to your scope:

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

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

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

Next, introduce 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
    }
});

Implement some basic validation to prevent overwriting existing 'ids'.

Answer 4

Begin by connecting all the form fields to your scope:

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

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

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

Next, introduce 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
    }
});

Implement some basic validation to prevent overwriting existing 'ids'.

Utilizing ng-submit and ng-model to include a JSON object

How can I correctly insert(add) an object(nest) into a JSON using Angular?

Answer №1

Answer №2

Similar questions

Convert the entire webpage to JSON format instead of traditional HTML using Nuxt.js

What causes the findByIDAndUpdate method to return a `null` value in Mongoose 6?

How to Conceal the Search Bar in jQuery DataTables

Retrieve an array from a JSON file obtained from a web request using Python

Is it possible to add data in MongoDB without specifying a field name?

The route in my Node.js Express application appears to be malfunctioning

Modify payload.parameters.name according to the specified requirement in the JOLT specification

Is it common for the $scope.$digest function to be skipped in production code but necessary when running unit tests?

Using React with SortableJS to exclude specific elements from being sorted towards the end

What is the best way to handle a select input that may have varying options in

Manage images with Jquery and PHP/Mysql

The HTML Style for implementing HighChart title text does not work when exporting files

Invoke a C# function (WebMethod) using Javascript (JQuery)

Exclude a specific link from a JQuery function

Transmit a message from the background.js script to the popup window

Unable to access the android static variable

Make sure that the webpage does not display any content until the stylesheet has been fully loaded by

Incorporate React JS seamlessly into your current webpage

Which language should I focus on mastering in order to create a script for my Epson receipt printer? (Check out the manual for reference)

The step-by-step guide to deactivating server-side JavaScript on MongoDB using a Java application