Store the results of the ng-repeat function in an Array

Question

Store the results of the ng-repeat function in an Array

Within my MongoDB attributes collection, I am looking to include a new field "odoo_name" for each attribute and save it.

For instance, with 100 attributes, each one will now have an odoo_name field in order to update the existing database.

Issue : when I check console.log(odoo_name), it displays undefined, indicating that it cannot recognize the name entered in the input field.

I modified the ng-submit function to saveOdooNames(vm.localAttributes) and while I am able to retrieve all data, accessing the ng-model still returns undefined. (console.log(inputs.odoo_name)

<form ng-submit="saveOdooNames(i)">
      <button>Save</button>
      <div class="col-md-12">
        <ul class="grid">
          <li data-ng-repeat="i in vm.localAttributes">
            <label>
              <div class="attribute-msl-link-label-wrap">
                <div class="attribute-msl-link-label">
                  <span class="attribute-icon">
                    <i class="glyphicon glyphicon-folder-open"></i>
                  </span>
                  <span class="attribute-number">{{ i.number_id }}</span>
                  <span class="attribute-title" title="{{i.project.name}}">{{ i.name }}</span>
                  <input ng-model="i.odoo_name" type="text" class="form-control"/>
                  <a href="javascript:void(0)" class="del-attr" data-id="{{ i._id}}" data-parent="0">
                    <i class="glyphicon glyphicon-trash"></i>
                  </a>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </form>

This code snippet is from my controller :

$scope.saveOdooNames = function (o) {
  var inputs = [];
   inputs.push(o);     
  $http({
    method: 'POST',
    format: 'json',
    url: '/api/odoonames',
    headers: {
      'Content-Type': 'application/json'
    },
    data: { _id : inputs._id,
            odoo_name : inputs.odoo_name }

  }).then(function (success) {
    console.log('Success ' + JSON.stringify(success));
  }, function (error) {
    console.error("Error " + JSON.stringify(error));
  });    
};

Note: Saving fields individually works fine, but I require a bulk save for these fields.

EDIT :

I changed ng-submit="saveOdooNames(i)" to ng-submit=vm.localAttributes)"

End Edit

The Save button should store all input data in an Array named "inputs"

javascript angularjs arrays angularjs-ng-repeat

Answer 1

Answer №1

Instead of passing parameter "i" which is undefined due to the nested ng-repeat, it is recommended to directly link the save function to the button. By utilizing vm.localAttributes, you can easily access your data within the function.

<form>
    <button ng-click="saveOdooNames(vm.localAttributes)">Save</button>
....

Answer 2

Instead of passing parameter "i" which is undefined due to the nested ng-repeat, it is recommended to directly link the save function to the button. By utilizing vm.localAttributes, you can easily access your data within the function.

<form>
    <button ng-click="saveOdooNames(vm.localAttributes)">Save</button>
....

Answer 3

Answer №2

When using the $http method, make sure to return it as a promise. It's important to handle the data properly by pushing it into an array and assigning objects correctly without forgetting to reference the index of the array. Adding a return statement is essential, but you may still need to refactor the data being assigned in the data params. Hopefully, these tips steer you in the right direction.

function processNamesRequest(inputs) {
  return $http({
    method: 'POST',
    format: 'json',
    url: '/api/odoonames',
    headers: {
      'Content-Type': 'application/json'
    },
    data: {
      _id: inputs._id,
      odoo_name: inputs.odoo_name
    }

  }).then(function(success) {
    console.log('Success ' + JSON.stringify(success));
  }, function(error) {
    console.error("Error " + JSON.stringify(error));
  });
}
$scope.saveOdooNames = function(o) {
  //if you dont need an array here 
  //i would just send `o` as is in the request
  var inputs = [];
  inputs.push(o);
  return processNamesRequest(inputs)
};

/*Refactored: I'd also consider putting all http requests inside of a factory or a service.*/

function processNamesRequest(input) {
  return $http({
      method: 'POST',
      format: 'json',
      url: '/api/odoonames',
      headers: {
        'Content-Type': 'application/json'
      },
      data: {
        _id: input._id,
        odoo_name: input.odoo_name
      }

    })
    .then(function(success) {
      console.log('Success ' + JSON.stringify(success));
    })
    .catch(function(error) {
      console.error("Error " + JSON.stringify(error));
    });
}
$scope.saveOdooNames = function(o) {
  return processNamesRequest(o)
};

Answer 4

When using the $http method, make sure to return it as a promise. It's important to handle the data properly by pushing it into an array and assigning objects correctly without forgetting to reference the index of the array. Adding a return statement is essential, but you may still need to refactor the data being assigned in the data params. Hopefully, these tips steer you in the right direction.

function processNamesRequest(inputs) {
  return $http({
    method: 'POST',
    format: 'json',
    url: '/api/odoonames',
    headers: {
      'Content-Type': 'application/json'
    },
    data: {
      _id: inputs._id,
      odoo_name: inputs.odoo_name
    }

  }).then(function(success) {
    console.log('Success ' + JSON.stringify(success));
  }, function(error) {
    console.error("Error " + JSON.stringify(error));
  });
}
$scope.saveOdooNames = function(o) {
  //if you dont need an array here 
  //i would just send `o` as is in the request
  var inputs = [];
  inputs.push(o);
  return processNamesRequest(inputs)
};

/*Refactored: I'd also consider putting all http requests inside of a factory or a service.*/

function processNamesRequest(input) {
  return $http({
      method: 'POST',
      format: 'json',
      url: '/api/odoonames',
      headers: {
        'Content-Type': 'application/json'
      },
      data: {
        _id: input._id,
        odoo_name: input.odoo_name
      }

    })
    .then(function(success) {
      console.log('Success ' + JSON.stringify(success));
    })
    .catch(function(error) {
      console.error("Error " + JSON.stringify(error));
    });
}
$scope.saveOdooNames = function(o) {
  return processNamesRequest(o)
};

Answer 5

Answer №3

It occurred to me that I was mistakenly trying to save an array of objects into the inputs array without specifying the index, which resulted in "undefined" values being returned. Here is the corrected approach:

SOLUTION 1 :

$scope.saveOdooNames = function(o) {                    
    var data = [];
    for (var i = 0; i < o.length; i++) {                
        data.push({_id: o[i]._id, odoo_name: o[i].odoo_name});                
    }
    console.log(data);
    // $http post code 
};

However, the above code retrieves all odoo_name fields even those that were not changed or modified. This led me to implement a second solution.

SOLUTION 2 :

I utilized underscore filter by directly calling my model without passing "o" as a parameter.

$scope.saveOdooNames = function () {          

    var o = _.filter(vm.localAttributes, function (x) {
        return x.odoo_name;
    });
    var data = [];
    for (var i = 0; i < o.length; i++) {                
        data.push({_id: o[i]._id, odoo_name: o[i].odoo_name});                
    }
    console.log(data);
    // $http post code
}

Both solutions are effective, but the one using filter allows me to utilize angular filters for the first solution.

Answer 6

It occurred to me that I was mistakenly trying to save an array of objects into the inputs array without specifying the index, which resulted in "undefined" values being returned. Here is the corrected approach:

SOLUTION 1 :

$scope.saveOdooNames = function(o) {                    
    var data = [];
    for (var i = 0; i < o.length; i++) {                
        data.push({_id: o[i]._id, odoo_name: o[i].odoo_name});                
    }
    console.log(data);
    // $http post code 
};

However, the above code retrieves all odoo_name fields even those that were not changed or modified. This led me to implement a second solution.

SOLUTION 2 :

I utilized underscore filter by directly calling my model without passing "o" as a parameter.

$scope.saveOdooNames = function () {          

    var o = _.filter(vm.localAttributes, function (x) {
        return x.odoo_name;
    });
    var data = [];
    for (var i = 0; i < o.length; i++) {                
        data.push({_id: o[i]._id, odoo_name: o[i].odoo_name});                
    }
    console.log(data);
    // $http post code
}

Both solutions are effective, but the one using filter allows me to utilize angular filters for the first solution.

Store the results of the ng-repeat function in an Array

Answer №1

Answer №2

Answer №3

Similar questions

Javascript data table pagination and custom attributes resulting in unexpected truncation of strings

Losing scope of "this" when accessing an Angular2 app through the window

The canvas grid is malfunctioning and failing to display correctly

Tips for creating an option list on the fly

Formik React struggling with error management and handling tasks accurately

What is the best way to eliminate the # symbol from a URL within a Vue.js application when utilizing a CDN

Execute a Python script with a JavaScript click event

Using karma for angular to compile directives

What is the best way to ensure that text moves to the next line if it exceeds the boundaries of the parent div in either CSS or

The state remains unchanged when clicking on the div element

Show the percentage of completion on the progress bar while uploading with AJAX

Is there a way to switch on and off an ngrx action?

Utilize ReactJS and AJAX to easily upload images

Angular: Unable to access values of non-existent data (reading '0')

Adjusting the definition of a class method in TypeScript or JavaScript

Wrap a HTML element with another element

Python code malfunctioning only under a post request execution

Ways to retrieve the values from a numpy array employing an array that includes the index numbers I wish to retrieve

Analyze two sets of JSON data and compile a new JSON containing only the shared values

Tips for refreshing a nested state in React