What is the process for obtaining a JSON file in AngularJS upon clicking a button?

Question

What is the process for obtaining a JSON file in AngularJS upon clicking a button?

Starting off with AngularJS and feeling excited.

I have successfully created a form with two input boxes.

Just below the input boxes, I have added:

<input ng-model="id.todoList" type="text" name="input" placeholder="Enter tasks here">
<input ng-model="id.todoList1" type="text" name="input" placeholder="Enter tasks here">

After entering the values in the inputs,

I managed to store them as an array. Done!

Whenever I click the submit button, the form inputs get pushed into the array.

However, there's one major issue...

If I enter details for 3 users and then try to add more, the previously stored 3 user details also get overwritten.

Any help on how I can fix this?

Here is the fiddler link for reference: Fiddler Link

javascript angularjs

Answer 1

Answer №1

To create an array of JSON objects, make sure to include the todoList and todoList1 data.

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

app.controller('MainCtrl', function($scope) {
  $scope.todos = []
  $scope.id = {   // Defining the id object
    todoList: "",
    todoList1: ""
  }

  $scope.addTodo = function() {
    // Constructing a JSON array with 
    // keys todoList and todoList1
    $scope.todos.push({
      todoList: $scope.id.todoList,
      todoList1: $scope.id.todoList1,
    })
  }

  $scope.clearAll = function() {
    $scope.todos = []
  }

});

View DEMO

Answer 2

To create an array of JSON objects, make sure to include the todoList and todoList1 data.

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

app.controller('MainCtrl', function($scope) {
  $scope.todos = []
  $scope.id = {   // Defining the id object
    todoList: "",
    todoList1: ""
  }

  $scope.addTodo = function() {
    // Constructing a JSON array with 
    // keys todoList and todoList1
    $scope.todos.push({
      todoList: $scope.id.todoList,
      todoList1: $scope.id.todoList1,
    })
  }

  $scope.clearAll = function() {
    $scope.todos = []
  }

});

View DEMO

Answer 3

Answer №2

Here is an example for you to try:

<body ng-app="plunker">
    <div class="container" ng-controller="MainCtrl">
      <div class="main">
        <p>Todo App</p>
        <input ng-model="id.todoList" type="text" name="input" placeholder="Enter tasks here">
        <input ng-model="id.todoList1" type="text" name="input" placeholder="Enter tasks here">
        <button ng-click="addTodo()">Add</button>
        <ul>
          <li ng-repeat="todo in todos track by $index">
            {{todo}}
          </li>
        </ul>
      </div>
    </div>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script>

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

app.controller('MainCtrl', function($scope) {
  $scope.todos = []
  $scope.todoList = "";

  $scope.addTodo = function(){
    var temp =  $scope.id;
    $scope.todos.push({"todoList":$scope.id.todoList,"todoList1":$scope.id.todoList1});
    console.log($scope.todos);
    $scope.id.todoList = '';
    $scope.id.todoList1 = '';
  }

  


});
</script>
  </body>

Answer 4

Here is an example for you to try:

<body ng-app="plunker">
    <div class="container" ng-controller="MainCtrl">
      <div class="main">
        <p>Todo App</p>
        <input ng-model="id.todoList" type="text" name="input" placeholder="Enter tasks here">
        <input ng-model="id.todoList1" type="text" name="input" placeholder="Enter tasks here">
        <button ng-click="addTodo()">Add</button>
        <ul>
          <li ng-repeat="todo in todos track by $index">
            {{todo}}
          </li>
        </ul>
      </div>
    </div>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script>

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

app.controller('MainCtrl', function($scope) {
  $scope.todos = []
  $scope.todoList = "";

  $scope.addTodo = function(){
    var temp =  $scope.id;
    $scope.todos.push({"todoList":$scope.id.todoList,"todoList1":$scope.id.todoList1});
    console.log($scope.todos);
    $scope.id.todoList = '';
    $scope.id.todoList1 = '';
  }

  


});
</script>
  </body>

Answer 5

Answer №3

Try switching to the following code snippet:

<button ng-click="addToDo(item)">Submit</button>

Here is how you can retrieve values from a form using JavaScript:

item.task
item.description

Answer 6

Try switching to the following code snippet:

<button ng-click="addToDo(item)">Submit</button>

Here is how you can retrieve values from a form using JavaScript:

item.task
item.description

What is the process for obtaining a JSON file in AngularJS upon clicking a button?

Answer №1

Answer №2

Answer №3

Similar questions

The local variable within the Angular constructor is not initialized until the ngOnInit() function is invoked

Storing data with Laravel 5.3 using Storage::put and XMLHttpRequest

Is there a point in bundling NPM packages if they are ultimately going to be bundled by the project

Trigger a function in JavaScript by clicking on an element and passing its class

After utilizing the function, the forward and back arrows are no longer visible

Tips on using Ajax to post in HTML

Unlock the Power of Core 2 MVC with the Cutting-edge Integration of

An issue has arisen: It seems that properties of null cannot be accessed, particularly the 'toISOString' property

After submitting the form, I must only deactivate the checkbox that has been selected

What is the best way to leverage an existing user database and integrate user authentication into a fresh project?

Showing the value of a JavaScript variable within an HTML input field

What is the best way to update an existing cookie value using angularjs?

Struggling to retrieve JSON data from the MercadoLibre API while consistently encountering the CORS error?

What is the best method for linking an HTML file to CSS, javascript, and image files?

Currently seeking user coordinates for Vue implementation

Utilize jQuery to run a script once everything is prepared and loaded

How should the nonce be properly set in the csp policy?

Performing an action once all AJAX requests have finished

Why does the getOwnPropertyDescriptor() method in JavaScript include custom properties that are inherited?

Looking to verify the validity of my email and phone number