ways to display nested arrays in angularjs

I'm having an issue with binding and displaying the value of an array. When I assign the value using the scope variable like this:

$scope.StockList = obj.data

Everything works fine. However, when I try to push the value into the array like this

$scope.StockList.push(obj.data);

It doesn't work as expected.

I am facing a problem with ng-repeat and scope variable. Can someone help me out? Here is my code snippet.

$scope.StockList = [];
$scope.IsVisible = false;
var Stocks = [];

function GetStockEntries(loid, pid) {
  var data = { LocationId: loid, ProductId: pid }
  return $http.post(serviceURL + "/GetLocationStockEntries", data).then(
    function success(data, status, headers, config) {
      var obj = JSON.parse(data.data.d)

      //working fine in case single array
      //$scope.StockList = obj.data
      $scope.StockList.push(obj.data);    
    },
    function error(data, status, headers, config) {
      return data
    }
  )
}

$scope.StockListing = function (item) {
  debugger
  $scope.IsVisible = !$scope.IsVisible
  console.log($scope.StockList)
}

Here is the ng-repeat code snippet

<table cellpadding="5" cellspacing="0" class="stocktransferdiv">
  <tr>
    <td colspan="4">
      <table cellpadding="5" cellspacing="0" data-ng-repeat="stockItem in StockList" data-ng-show = "IsVisible" data-ng-cloak width="100%">                                            
        <tr style="border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-bottom: 5px; float: left;">
          <td>
            <input type="radio" name="groupName" data-ng-value="true" data-ng-model="stockItem.selected" data-ng-change="onTaskSelect(stockItem)" />
          </td>
          <td>
            <input type="text" data-ng-model="stockItem.UserInventoryItemID" disabled="" readonly="" style="border: none; background-color: white;">
          </td>
          <td>
            <input type="text" data-ng-model="stockItem.LotNumber" disabled="" readonly="">
          </td>
          <td>
            <span>{{stockItem.QuantityOnHand}}</span>
            <span>{{stockItem.UnitName}}</span>
          </td>
          <td>
            <input type="text" data-ng-model="stockItem.EnteredQuantity" >
          </td>
          <td>
            <input type="text" data-ng-model="stockItem.Description" disabled="" readonly="">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

And here is the output of that json

https://i.sstatic.net/0yb2x.png

Answer №1

When your service provides an array of objects, the next step is to iterate over them and append them to another array,

var object = data.data.d; 
$scope.resultingArray = object;
$scope.resultingArray.forEach(function(item) { 
$scope.StockList.push(item); 
}) 

Answer №2

Here is a slightly modified version of the approved solution that should be effective. Give it a try.

var object = JSON.parse(data.data.d);
        $scope.output = object.data;
        angular.forEach($scope.output, function (item) {
            $scope.StockList.push(item);
        })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to assign a value to an indexed property in 'FileList': Setter function for index properties is not enabled

angular.module('myApp') .directive('fileModel', ['$parse', 'uploadService','messageService','CONF', function ($parse, uploadService,messageService,CONF) { return { restrict ...

What is the best way to transfer properties to a different component using the onClick event triggered by an element generated within the map function?

I am currently working on an application using react to retrieve data from a mongodb database. Within one of the components, called Gallery, I have integrated a map function to display a list of items. My goal is to implement an onClick event for each elem ...

Experimenting with a loader component in AngularJS

This is a test for a $resource with a loader describe('Service: MultiCalculationsLoader', function(){ beforeEach(module('clientApp')); var MultiCalculationLoader, mockBackend, calculation; beforeEach(inject(function (_ ...

Navigate to the homepage section using a smooth jQuery animation

I am looking to implement a scrolling feature on the homepage section using jquery. The challenge is that I want the scrolling to work regardless of the page I am currently on. Here is the HTML code snippet: <ul> <li class="nav-item active"> ...

Issue: Trouble with Angular Routing linking to Express backend for templateUrl

I'm experiencing a problem with displaying a partial using angular routing and express. I'm trying to configure it so that I can still use pug (previously jade) to write short-form html. Everything seems to be set up correctly with no errors, and ...

Navigating through the Express Routing: Homepage and Error 404

I've been working on a Node application with Express, and currently have the following code snippet in my app: app.use('/', function(req, res) { res.render('index', {}); }); While this route is functioning properly ...

What is the best way to include an ajax request within a function and execute it only when needed?

I am working on an ajax request that fetches data from a specific URL. I have the following code snippet: $.ajax({ type: 'POST', url: '/get-result.php', dataType: 'json', data: 'pid=' + $(this).attr( ...

Tips for resolving the Range issue with jQuery-UI slider and activating a function when changes are made

I created a simple form that calculates an estimated price based on quantity and one of three options. Then, I attempted to integrate a jQuery-UI slider into the form. However, I encountered an issue where the slider was displaying values outside of the sp ...

Sidebar navigation text shifting during transition

I attempted to modify the CSS and JavaScript, but unfortunately, it had no effect and actually caused more issues. I adjusted the position and display properties in the CSS, but it seems that wasn't the root of the problem. If anyone could offer assis ...

How can subdocuments in an array be projected in MongoDB if a specific key is present?

I have a diverse collection containing an array of various documents { "person" : { "location" : "Netherlands", "gender" : "F", "weight&q ...

What can be done to avoid causing other elements to blur when clicking a button?

Imagine a scenario where there is a textarea and a button present. If the button is clicked, typically the textarea will blur. However, in this case, I do not want that to happen. I am seeking advice on how to prevent the textarea from blurring u ...

What is the best way to update my component when the selected value is changed?

Currently, I am facing an issue with my map component. It plots polyline data based on the option selected from the select menu component. The problem arises when I change the value in the select menu and click the play button for the animation. Instead of ...

What is the best way to incorporate a text box along with a submit button that triggers a callback to a javascript function when clicked, utilizing either plain javascript or jQuery?

As a beginner in the world of JavaScript, I'm struggling to find the solution to this problem. Any assistance would be greatly welcomed. ...

How to use Jquery to fetch the value of a td element nested inside another

After consulting the manual, I am trying to find a way to extract the value in the second column of a table when a specific span is clicked. However, the challenge is that the click event is currently being triggered by the first span cell. Here is the jQu ...

Understanding the differences between paths and parameters of routes in express.js

My express application has the following routes: // Get category by id innerRouter.get('/:id', categoriesController.getById) // Get all categories along with their subcategories innerRouter.get('/withSubcategories', categoriesControll ...

Which one should I use: ng-repeat or ng-options?

I am looking to display JSON data in a dropdown list, and I have two options to choose from. The first option is using ng-repeat, while the other option is ng-options. Using ng-repeat: In the HTML file: <select> <option ng-repeat="prod in testA ...

What is the best way to add a change event to a textarea that is already applied with a filtered one-way binding?

I have a text area that is already linked with a filter, so it will display the correct information when the page loads. Now, I want to update a model when the text area content changes. However, when I add a model and change event, the initial binding sto ...

Error: The signature for uploading S3 Knox Node.js does not match

For the past several days, I've been attempting to upload a file named message.txt to AWS S3 using knox and node js. However, I continuously encounter an error stating that the signature doesn't match. Here is my code snippet in node js (since ...

How can I attach an event listener to an element that is added dynamically with jQuery?

I added a new div element dynamically using jQuery's on method. However, I'm having trouble getting a listener to work for the newly created element. HTML <input class="123" type="button" value="button" /> <input class="123" type="butt ...

Uploading files in NodeJS using the multer library

I am attempting to upload a file to a specific directory on the disk using the multer library. As I analyze the code, it seems that when a request is made, the file is taken from it and saved separately from the rest of the request. Is there a way to acces ...