Encountering naming problem with ng-model, attempting to create an array but receiving a hash instead

Question

Encountering naming problem with ng-model, attempting to create an array but receiving a hash instead

Trying to create an array using ng-model,

<div ng-repeat="n in [1, 2, 3]">
  <input type="text" class="form-control" ng-model="headers[$index].key">
  <input type="text" class="form-control" ng-model="headers[$index].value">
</div>

After using angular.toJson ($scope.headers), I received:

{
  "headers": {
    "0": {
      "key": "xxx",
      "value": "yyy"
    }
  }
}

However, my desired output was:

{
  "headers": [
    {
      "key": "xxx",
      "value": "yyy"
    }
  ]
}

Is it possible to achieve this format?

javascript angularjs

Answer 1

Answer №1

Does this align with your expectations?

VIEW DEMO

index.js

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8b9b6bfadb4b9aaf6b2ab98e9f6ecf6a0">[email protected]</a>" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="object in transformedData">
      <input type="text" class="form-control" ng-model="object.key">
      <input type="text" class="form-control" ng-model="object.value">
    </div>

    <pre>{{transformedData}}</pre>
  </body>

</html>

app.js

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

app.controller('MainCtrl', function($scope) {

  var data = {
    "headers": {
      "0": {
        "key": "xxx",
        "value": "yyy"
      }
    }
  };

  $scope.transformedData = transformData(data.headers)

  function transformData(data){
    var arr = [];
    for(var key in data){
      arr.push(data[key])
    }
    return arr;
  }

});

Answer 2

Does this align with your expectations?

VIEW DEMO

index.js

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8b9b6bfadb4b9aaf6b2ab98e9f6ecf6a0">[email protected]</a>" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="object in transformedData">
      <input type="text" class="form-control" ng-model="object.key">
      <input type="text" class="form-control" ng-model="object.value">
    </div>

    <pre>{{transformedData}}</pre>
  </body>

</html>

app.js

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

app.controller('MainCtrl', function($scope) {

  var data = {
    "headers": {
      "0": {
        "key": "xxx",
        "value": "yyy"
      }
    }
  };

  $scope.transformedData = transformData(data.headers)

  function transformData(data){
    var arr = [];
    for(var key in data){
      arr.push(data[key])
    }
    return arr;
  }

});

Answer 3

Answer №2

To make the header work with ng-model assignments, ensure you initialize it as an array.

I've made changes to the plunker that was originally posted by @Matt. Take a look at it here:

http://plnkr.co/edit/a1BnTJ4sGqFPhZ25lMWE?p=preview

Answer 4

To make the header work with ng-model assignments, ensure you initialize it as an array.

I've made changes to the plunker that was originally posted by @Matt. Take a look at it here:

http://plnkr.co/edit/a1BnTJ4sGqFPhZ25lMWE?p=preview

Encountering naming problem with ng-model, attempting to create an array but receiving a hash instead

Answer №1

Answer №2

Similar questions

Tips for implementing conditional sections in an Angular template HTML file

Update the image with a new one using jQuery and PHP, then refresh the page to see

Problem encountered while using AJAX to load a PHP script, triggered by an onclick event;

What causes errors in my AJAX request based on the particular file extension?

Initial space in model variable not being displayed

What is the best way to incorporate a class creation pattern in Typescript that allows one class to dynamically extend any other class based on certain conditions?

The conditional expression in AngularJS is failing to execute

What steps can I take to make sure the JavaScript runs and updates the images correctly?

Update a specific HTML element when the result of an equation is modified

Remove any list items that do not possess a particular class

Updating the values of parent components in Vue.js 3 has been discovered to not function properly with composite API

Breaking on newline, excluding newline-space in JavaScript

javascript download multiple PDF files on Internet Explorer

Problem with declaring Javascript objects

How do I retrieve the HSL value for a color selected using an input of type 'color' in JavaScript?

stopPropagation() halts the propagation in the opposite direction

Automatically adjusting input box size and position in real-time

Enhance data validation in PHP

Tips for creating a Material UI (next) dialog with generous top and bottom margins that extend off the screen

Trouble arises when attempting to categorize an array of objects in JavaScript