Add the contents of `$scope.data` into a JSON object using

Question

Add the contents of `$scope.data` into a JSON object using

I am trying to update a JSON file with data entered in form elements, but I seem to be encountering some issues.

<html ng-app="example">
    <div ng-controller="ListController">
        <form name="myform" ng-submit="addThis()">
            <input type="text" ng-model="model1">
            <input type="text" ng-model="model2">
        </form>
    </div>
</html>

JS:

 var app = angular.module('example', []);
 app.controller('ListController', ["$scope", "$http", function($scope) {
     $http.get("_/js/data.json").success(function(data) {
         $scope.mydata = data;
     });
     $scope.addThis = function() {
         $scope.mydata.push({
              model1:$scope.mydata.keyname1,
              model2:$scope.mydata.keyname2
         });
     };
 }]);

I'm having trouble understanding what's causing the issue. Can someone help?

javascript json angularjs push

Answer 1

Answer №1

There are a few things to consider:

Firstly, in your JavaScript code, it appears that you did not properly close one of the functions.

Secondly, it seems like the scope variables were not defined correctly. The $scope does not typically store "name" properties of HTML objects. To reference variables stored in the controller scope from HTML, use curly brackets or certain ng-tags like ng-model.

Additionally, when storing variables in $scope.mydata.somevar, be sure to call them using mydata.somevar.

Here is the corrected JS code:

var app = angular.module('example', []);
app.controller('ListController', ["$scope", "$http", function($scope) { 

 $scope.mydata = { model1: '', model2: ''} ; // initializing the model earlier on (good practice)

 $http.get("_/js/data.json").success(function(data) {
    $scope.mydata.data = data;
 }); // <----- make sure to have correct syntax!

 $scope.addThis = function() {
   $scope.mydata.model1 = $scope.mydata.data.keyname1;
   $scope.mydata.model2 = $scope.mydata.data.keyname2;
 };
}]);

And here is the corrected HTML code:

<html ng-app="example">
     <div ng-controller="ListController">     
         <form name="myform" ng-submit="addThis()">
            <input type="text" ng-model="mydata.model1"> 
            <input type="text" ng-model="mydata.model2"> <!--- Make sure to use mydata.model2! ---->
          </form>
      </div> 
 </html>

Lastly, keep in mind that $http loads things asynchronously. If you want to improve your code structure, consider using q promises for better flow control. Alternatively, you can automatically load the JSON file into the form and have it store the data in $scope.mydata.model1 and $scope.mydata.model2 as soon as it is retrieved.

Answer 2

There are a few things to consider:

Firstly, in your JavaScript code, it appears that you did not properly close one of the functions.

Secondly, it seems like the scope variables were not defined correctly. The $scope does not typically store "name" properties of HTML objects. To reference variables stored in the controller scope from HTML, use curly brackets or certain ng-tags like ng-model.

Additionally, when storing variables in $scope.mydata.somevar, be sure to call them using mydata.somevar.

Here is the corrected JS code:

var app = angular.module('example', []);
app.controller('ListController', ["$scope", "$http", function($scope) { 

 $scope.mydata = { model1: '', model2: ''} ; // initializing the model earlier on (good practice)

 $http.get("_/js/data.json").success(function(data) {
    $scope.mydata.data = data;
 }); // <----- make sure to have correct syntax!

 $scope.addThis = function() {
   $scope.mydata.model1 = $scope.mydata.data.keyname1;
   $scope.mydata.model2 = $scope.mydata.data.keyname2;
 };
}]);

And here is the corrected HTML code:

<html ng-app="example">
     <div ng-controller="ListController">     
         <form name="myform" ng-submit="addThis()">
            <input type="text" ng-model="mydata.model1"> 
            <input type="text" ng-model="mydata.model2"> <!--- Make sure to use mydata.model2! ---->
          </form>
      </div> 
 </html>

Lastly, keep in mind that $http loads things asynchronously. If you want to improve your code structure, consider using q promises for better flow control. Alternatively, you can automatically load the JSON file into the form and have it store the data in $scope.mydata.model1 and $scope.mydata.model2 as soon as it is retrieved.

Add the contents of `$scope.data` into a JSON object using

Answer №1

Similar questions

Mocking a promise rejection in Jest to ensure that the calling function properly handles rejections

Exploring JSON data and appending it to an array: How to do it?

Exploring the concept of utilizing named arguments within Express.js routing

The overflow hidden property does not seem to be effective when used in conjunction with parallax

Guidelines for passing a value to a method within a method using JavaScript

What steps should be taken in PHP to display a popup when the user input is found to be invalid?

What steps can be taken to create a progress bar in the input field that spans the entire width of its parent div, reaching

Using ng-bind-html within a ng-repeat loop

What is the reason that the attr function fails to function in this particular scenario?

Looking for a way to retrieve Instagram data with Python using Selenium, following Instagram's recent API changes? Having trouble locating all entries, as only 12 are showing up?

Receive the complete HTML page as a response using JavaScript

Positioning Backgrounds with Padding in DIV Elements

Codemirror - Advanced Auto-Suggest Feature with Separator

Difficulty encountered when utilizing a header-only library within Visual Studio 2022

Making requests using Axios in a web application created with Express, Node, and EJS

An unusual error occurred stating that the `forEach` property does not exist on the given type

Error 9 in Firebase: The function 'initializeApp' could not be located within the 'firebase/app' module

What sets apart loads and dumps from reading a JSON file?

Guide on accessing an array within a JSON object?

I encountered a response error code 500 from the development server while using my emulator