CODEWITHSUNDEEP
jqueryjsonangularjs
user3677331
user3677331

Reputation: 698

JSON from a form using Angular

I have many forms in my app, some forms are so big that I can't create hardcoded-json keys with values inserted using Angular controllers. I need some automated way to generate JSON from these forms in very trivial structure say {"key":value,"key":value,......} but the problem is I can't create keys in an automated way(say from the element's place-holder or ng-model name). Here's my ionic markup

<ion-view title="Simple test">
    <ion-content>
        <div class="item bar bar-header bar-{{todo.color}}">
          <h1 class="title">{{todo.title}}</h1>
        </div>

        <div class="list list-inset" id="tust">
<label class="item item-input item-floating-label">
<span class="input-label">Fire and rescue service</span>
  <i class="icon ion-android-call placeholder-icon"></i>
<input type="tel" placeholder="Fire and rescue">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Fire Protection Officer</span>
  <i class="icon ion-android-call placeholder-icon"></i>
<input type="tel" placeholder="Fire Protection Officer">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Fire extinguisher maintenance</span>
  <i class="icon ion-android-call placeholder-icon"></i>
<input type="tel" placeholder="Fire extinguisher maintenance">
</label>
              <label class="item item-input item-floating-label">
<span class="input-label">Automatic fire alarm maintainer</span>
  <i class="icon ion-android-call placeholder-icon"></i>
<input type="tel" placeholder="Automatic fire alarm maintainer">
</label>

Is there a way to get the ng-model name of a model in the controller or is there any other way(even if dirty) to generate keys for json from the element? Thanks

Upvotes: 0

Views: 87

Answers (2)

tcooc
tcooc

Reputation: 21199

Edit: There's actually a easy way to define a model with key-value pairs:

Setting ng-model to something like data.key will set $scope.data[key] = value automatically.

function MyController($scope) {
  $scope.data = {};
}
label {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyController">
  <label class="item item-input item-floating-label">
    <span class="input-label">Fire and rescue service</span>
    <i class="icon ion-android-call placeholder-icon"></i>
    <input type="tel" ng-model="data.fireAndRescue" placeholder="Fire and rescue">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Fire Protection Officer</span>
    <i class="icon ion-android-call placeholder-icon"></i>
    <input type="tel" ng-model="data.fireProtection" placeholder="Fire Protection Officer">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Fire extinguisher maintenance</span>
    <i class="icon ion-android-call placeholder-icon"></i>
    <input type="tel" ng-model="data.maintenance" placeholder="Fire extinguisher maintenance">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Automatic fire alarm maintainer</span>
    <i class="icon ion-android-call placeholder-icon"></i>
    <input type="tel" ng-model="data.automaticAlarm" placeholder="Automatic fire alarm maintainer">
  </label>

  <div>Output: {{data}}</div>
</div>

Upvotes: 1

datamosh
datamosh

Reputation: 130

If you want to go jQuery, try something like

var obj = {};
$("input").each(
    function(index){
        var k = $(this).attr("placeholder").replace(/\s/gi, "-").toLowerCase();
        var v = $(this).val();
        obj[k] = v;
    }
)

Upvotes: 0

Related Questions