JSON from a form using Angular

Question

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

Your question is unclear. What is the "ng-model name of a model" and how do you "generate keys for json from elements"? — tcooc
– tcooc, Commented Apr 23, 2015 at 17:35
"ng-model name of a model" is actually the value for the ng-model attribute. "generate keys for json" means the name of 'key' in the {'key':value} pair. — user3677331
– user3677331, Commented Apr 23, 2015 at 18:43

tcooc · Accepted Answer · 2015-04-23 20:25:24Z

1

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>

edited Apr 23, 2015 at 20:25

answered Apr 22, 2015 at 22:46

tcooc

21.4k3 gold badges42 silver badges57 bronze badges

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

3 Comments

user3677331 Over a year ago

So is there NO WAY to get the ng-model attribute value? I could go the jquery route too.

tcooc Over a year ago

@user3677331I updated my answer with the method I think you're referring to.

user3677331 Over a year ago

Thank you, I'd come as close to this solution as data.key but didn't know about this magic.

datamosh · Accepted Answer · 2015-04-23 08:08:12Z

0

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;
    }
)

answered Apr 23, 2015 at 8:08

datamosh

1303 silver badges10 bronze badges

Collectives™ on Stack Overflow

JSON from a form using Angular

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related