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

Exploring AngularJS: Effortlessly Retrieving Object Values

Creating interactive tabs within the HTML document with AngularJS

utilizing Nuxt code in Elixir/Phoenix

JavaScript fails to effectively validate URLs

having difficulty inputting time into a time controller with selenium webdriver

Is it possible to utilize the useRef Hook for the purpose of storing and accessing previous state values?

The code provided creates a web form using HTML and ExpressJS to store submitted information into a MongoDB database. However, there seems to be an issue with the 'post' method, while the 'get' method functions correctly

Regular Expression designed specifically for detecting alternative clicks

How come .trim() isn't cooperating with me?

Unable to resolve the issue of Duplicate keys detected with value '0'. This could potentially lead to errors during updates

Where can I find the JavaScript code that controls the button function?

Using HTML, CSS, and JavaScript, the main tab must include nested subtabs to enhance navigation and

Using jQuery to fetch and read the source code of a specified URL

Utilize Haxe Macros to swap out the term "function" with "async function."

Ways to enhance the functionality of an input component

Tips for turning off the auto save password option on browsers for user registration forms

What are the steps to restrict the scope of a <style> declaration in HTML?

Having trouble accessing object values in ReactJS

Encountering unanticipated undefined elements while incorporating map in JSX

What is the best way to delete an added element once a DIV has been toggled with JQuery?