Developing dynamic objects for input string fields in AngularJS

Question

Developing dynamic objects for input string fields in AngularJS

In my AngularJS view, I have the following setup:

<label class="control-label">Name:</label>
  <input type="text" class="form-control" ng-model="config.name" />
<br />

<label class="control-label">versionSpecificApiConfig:</label>
<input type="text" class="form-control" ng-model="config.versionSpecificApiConfig" />
<br />

<label class="control-label">schemaUrl:</label>
<input type="text" class="form-control" ng-model="config.versionSpecificApiConfig.schemaUrl" />
<br />

I'm setting this up to achieve a specific structure for the config object:

{
 "name":"string",
 "versionSpecificApiConfig":{
  "string":{
           "schemaUrl":"string"
           }
      }
  }

However, I encountered an error stating "cannot set property for string in versionSpecificApiConfig field". Can someone assist me in creating a structure like this? (The use of "string" in the structure refers to the respective values of the textboxes).

javascript angularjs string object

Answer 1

Answer №1

Are you interested in a solution like this?

let application = angular.module("application" , []);
application.controller('Controller', ['$scope', Controller]);
function Controller($scope){
 $scope.configuration = {};
 $scope.displayInfo = function(){
     console.log($scope.configuration);
 }
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div ng-controller="Controller" ng-app="application">
<label class="control-label">Name:</label>
  <input type="text" class="form-control" ng-model="configuration.name" />
<br />

<label class="control-label">versionSpecificApiConfig:</label>
<input type="text" class="form-control" ng-model="configuration.versionSpecificApiConfig.string.schemaUrl" />
<br />

<label class="control-label">schemaUrl:</label>
<input type="text" class="form-control" ng-model="configuration.versionSpecificApiConfig.string.schemaUrl1" />
<br />

<button type="button" ng-click="displayInfo()">Click to see object</button>
<br/>
{{configuration}}
</div>

Answer 2

Are you interested in a solution like this?

let application = angular.module("application" , []);
application.controller('Controller', ['$scope', Controller]);
function Controller($scope){
 $scope.configuration = {};
 $scope.displayInfo = function(){
     console.log($scope.configuration);
 }
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div ng-controller="Controller" ng-app="application">
<label class="control-label">Name:</label>
  <input type="text" class="form-control" ng-model="configuration.name" />
<br />

<label class="control-label">versionSpecificApiConfig:</label>
<input type="text" class="form-control" ng-model="configuration.versionSpecificApiConfig.string.schemaUrl" />
<br />

<label class="control-label">schemaUrl:</label>
<input type="text" class="form-control" ng-model="configuration.versionSpecificApiConfig.string.schemaUrl1" />
<br />

<button type="button" ng-click="displayInfo()">Click to see object</button>
<br/>
{{configuration}}
</div>

Answer 3

Answer №2

I have implemented a solution for this issue and it is working perfectly. Give it a try and let us know.

<form ng-submit="func(config)">
        <label class="control-label">Name:</label>
          <input type="text" class="form-control" ng-model="config.name" />
        <br />

        <label class="control-label">versionSpecificApiConfig:</label>
          <input type="text" class="form-control" ng-model="config.versionSpecificApiConfig" />
        <br />

        <label class="control-label">schemaUrl:</label>
          <input type="text" class="form-control" ng-model="config.schemaUrl" />
        <br />

        <button type="submit"> Save </button>
      </form>

$scope.func = function(Obj){
      var keyObj = {};
      var versionObj = {};
      var data = {};

      var key = Obj.versionSpecificApiConfig;

      keyObj['schemaUrl'] = Obj.schemaUrl;

      versionObj[Obj.versionSpecificApiConfig] = keyObj;

      data['name'] = Obj.name;
      data['versionSpecificApiConfig'] = versionObj;
      console.log(data);
      var Json = JSON.stringify(data);
      console.log(Json);
    }

Answer 4

I have implemented a solution for this issue and it is working perfectly. Give it a try and let us know.

<form ng-submit="func(config)">
        <label class="control-label">Name:</label>
          <input type="text" class="form-control" ng-model="config.name" />
        <br />

        <label class="control-label">versionSpecificApiConfig:</label>
          <input type="text" class="form-control" ng-model="config.versionSpecificApiConfig" />
        <br />

        <label class="control-label">schemaUrl:</label>
          <input type="text" class="form-control" ng-model="config.schemaUrl" />
        <br />

        <button type="submit"> Save </button>
      </form>

$scope.func = function(Obj){
      var keyObj = {};
      var versionObj = {};
      var data = {};

      var key = Obj.versionSpecificApiConfig;

      keyObj['schemaUrl'] = Obj.schemaUrl;

      versionObj[Obj.versionSpecificApiConfig] = keyObj;

      data['name'] = Obj.name;
      data['versionSpecificApiConfig'] = versionObj;
      console.log(data);
      var Json = JSON.stringify(data);
      console.log(Json);
    }

Developing dynamic objects for input string fields in AngularJS

Answer №1

Answer №2

Similar questions

What is the best way to trigger two functions simultaneously using an onClick event in NextJS?

Issue with AngularJS date validation occurring only on the initial attempt

Troubleshooting TypeScript in Firefox

What is the function of async in Next.js when triggered by an onClick

Revisiting the Issue: Jquery Hover Effect Fails to Function in Internet Explorer

"Utilizing AJAX to dynamically extract data from PHP and manipulate it in a multi-dimensional

What are the steps to view my HTML webpage on a smartphone?

Updating entire DOM in javascript

Clicking on the button will allow you to sort the items in

Ensure the smooth scrolling feature is activated by adding an active class when either clicking or manually scrolling the

Can you explain the purpose of the window.constructor and global.constructor functions in JavaScript?

Rendering an element in React Router Dom based on specific conditions

Issue with jQuery hide() function in Internet Explorer 9

Tips for saving an image that has been dragged onto the browser locally

Managing the re-rendering in React

Is a single f.select impacting another f.select in the same form? (undesired)

Developing an interactive selector within the on() event handler

Is it feasible to utilize the .fadeTo() function in jQuery multiple times?

Combining arrays of objects in JavaScript

Tips for safely storing JWT in the browser