Add dynamic field to create specific JSON format

Question

Im trying to create a form with dynamic fields to create a JSON to post like this

{
"cpu": "1",
"ram": "128",
"env": {
    "envname1": "value1",
    "envname2": "value2"
}
}

While i have no problem to create cpu and ram i can not figure out to create "envname" and "value" because envname should be in a dynamic added field the first column and the value in second column.

I also can not get the regular fields and the dynamic fields together in one scope.

Please have a look at http://jsfiddle.net/q9dcn7wj/3/ cpu and ram fields are ignored. When i change

    $scope.inputs = [{id: 'choice1'}];

to

     $scope.inputs = {id: 'choice1'};

the dynamic fields are ignored. How do i get everything in the scope to submit the whole form as JSON?

Could you provide some details on what has to be dynamic? cpu, ram and env? Only env? (according to your fiddle) Why do you display two text fields per env property? — ngasull
– ngasull, Commented Dec 10, 2014 at 18:21
Well yes that is what is going to happen. "push" adds an item to an array. If you declare $scope.inputs = {id:'choice1'}; that is NOT an array. Where as $scope.inputs = [{id:'choice1'}]; IS an array. So doing 'push' on something that is not an array is not going to add a value. — Scott
– Scott, Commented Dec 10, 2014 at 19:30
with dynamic i mean the input fields for envi can add/remove with a click on a button. the user can add as many env values as he want in the form of envnameand value. — mikem
– mikem, Commented Dec 10, 2014 at 19:40

Michael Robinson · Accepted Answer · 2014-12-10 22:08:47Z

1

You are treating your inputs model as if it is both an array and an object.

I suggest you create a variables property on your input model and push/splice on that.

I've updated your JSFiddle, relevant code below:

JavaScript:

var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.inputs = { variable: [] };

$scope.addInput = function(){
    $scope.inputs.variable.push({name:'', value:''});
}

$scope.removeInput = function(index){
    $scope.inputs.variable.splice(index,1);
}
}]);

HTML:

<div ng-app="myApp" ng-controller="MyCtrl">

        <input type="text" ng-model="inputs.cpu" />cpu<br />
        <input type="text" ng-model="inputs.ram" />ram

    <div ng-repeat="input in inputs.variable">
        <input type="text" ng-model="input.name" />
        <input type="text" ng-model="input.value" />
        <button ng-click="removeInput($index)">Remove</button>
    </div>
    <button ng-click="addInput()">add input</button>
    <br />
<strong><label for="userDebugText">JSON:</label></strong>
<textarea id="userDebugText">{{inputs|json}}</textarea>
</div>

edited Dec 10, 2014 at 22:08

answered Dec 10, 2014 at 20:53

Michael Robinson

29.6k12 gold badges109 silver badges131 bronze badges

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

3 Comments

mikem Over a year ago

Thx this is one step forward but i also need the JSON in the mentioned format and key/value for envhas to come from the two input fields. So in your Fiddle { "variable": [ { "name": "value", "value": "" } ], "cpu": "1", "ram": "8" } nameshould be the input from the left field and value from the right one

Michael Robinson Over a year ago

When the user submits the form, process your model to match the format you want

mikem Over a year ago

the json is now not nested anymore and i still dont know how to add multiple lines to envwithout [ but {. i will play around with angular.copy. thx for this

Collectives™ on Stack Overflow

Add dynamic field to create specific JSON format

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related