Enhance your JSON formatting with dynamic fields

Question

Enhance your JSON formatting with dynamic fields

I am currently working on creating a form with dynamic fields in order to generate a JSON format for posting. The challenge lies in the structure of the JSON, particularly with the "envname" and "value" fields which need to be dynamically added based on user input.

My main hurdle is integrating these dynamic fields with regular fields within the same scope. I have attempted various methods but cannot seem to get everything to work together seamlessly.

If you would like to take a look at my progress so far, please visit http://jsfiddle.net/q9dcn7wj/3/. Currently, the cpu and ram fields are being ignored when I make changes to the code.

Any suggestions or guidance on how to properly submit the entire form as JSON would be greatly appreciated.

javascript json angularjs forms field

Answer 1

Answer №1

You seem to be treating your inputs model as both an array and an object.

One suggestion is to create a variables property on your input model and then use push/splice on that.

I've made some updates to your JSFiddle, with the relevant code snippet 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>

Answer 2

You seem to be treating your inputs model as both an array and an object.

One suggestion is to create a variables property on your input model and then use push/splice on that.

I've made some updates to your JSFiddle, with the relevant code snippet 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>

Enhance your JSON formatting with dynamic fields

Answer №1

Similar questions

Store the encoded data in a variable

Default output to the browser in JSON using Django Rest Framework

Error encountered while attempting to obtain OAuth2 API authorization token in ExpressJS Node.js Angular: "getaddrinfo ENOTFOUND"

Using BackboneJS to fetch JSON data and render it on a view

Error: The absence of an element identified by the locator does not cause the protractor spec to fail, but rather it executes successfully

Tips on finding the right parent object by utilizing the information stored in the nested array

Rhino's env.js causes the anchor element's pathname to be undefined

Troubleshooting: Difficulty Reading .val() on Elements Selected by Class in jQuery.fn.init(9)

Can WS Websocket in Swift send and receive JSON objects?

Why does Typescript not enforce a specific return type for my function?

Dynamically loading various compositions of EDGE

Eliminating repeated entries in MongoDB

Creating custom functions within views using Sencha Touch 2

Preventing typing by detecting keypresses in a text input

Having trouble with a JQuery selector not functioning properly when trying to select a class in the HTML that contains a

Optimal method for Python to engage with MySQL databases

Managing Pop-Ups when browsing on Internet Explorer

Encoding the class hierarchy using Newtonsoft Json serialization

Is it possible to execute this html-minifier through the terminal on Ubuntu?

Reverse the color of H1 text within a vertical div