I have created a Plunker to display data under each category, but for some reason the data is not printing correctly. For example, the value 12345 should be displayed directly under 'bread'. I am unsure of where the issue lies in my code:
$scope.allProducts = [];
angular.forEach($scope.data, function(item, index){
angular.forEach(item.products, function(item2, index){
if($scope.allProducts.indexOf(item2.consummable) == -1){
$scope.allProducts.push(item2.consummable);
}
})
})
This is an updated version of the code snippet showcasing a different ng-repeat expression. The key takeaway here is that since we are repeating allProducts in the first line, we must also repeat it in subsequent lines and filter the data based on the selected value.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data =[
{
"resource": "100",
products: [
{
"consummable": "milk",
"rom": 1
},
]
},
{
"resource": "200",
products: [
{
"consummable": "bread",
"rom": 12345
},
]
},
{
"resource": "300",
products: [
{
"consummable": "butter",
"rom": 123456789
}
]
}
];
$scope.allProducts = [];
angular.forEach($scope.data,function(item, index){
angular.forEach(item.products, function(item2, index){
if($scope.allProducts.indexOf(item2.consummable) == -1){
$scope.allProducts.push(item2.consummable);
}
})
})
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<table style="border:1px solid red;">
<tr>
<td>
</td>
<td ng-repeat="itemProd in allProducts" style="border:1px solid red;">
{{itemProd}}
</td>
</tr>
<tr ng-repeat="item in data">
<td>
{{item.resource}}
</td>
<td ng-repeat="item2 in allProducts" style="border:1px solid red;" ng-init="product=(item.products | filter: {consummable:item2})[0]">
<a>{{product.rom}}</a>
</td>
</tr>
</table>
{{allProducts}}
{{data}}
</div>Ensure to review the following structure :
<table style="border : 1px solid">
<tr>
<td></td>
<td ng-repeat="product in allProducts">
{{product.consummable}}
</td>
</tr>
<tr ng-repeat="test in data">
<td>{{test.resource}}</td>
<td ng-repeat="pro in allProducts">{{pro.rom}}</td>
</tr>
Furthermore, remember to include item2 in allProducts besides just the consummable field :
angular.forEach($scope.data,function(item, index){
angular.forEach(item.products, function(item2, index){
if($scope.allProducts.indexOf(item2.consummable) == -1){
$scope.allProducts.push(item2); // Here I have pushed item2 instead of item2.consummable
}
})
})
Access Plunker for reference: http://plnkr.co/edit/YWPL2EmKK6MIwIkevZ1W?p=preview
If you're looking for the solution, here it is:
1) To generate allProducts, keep the code as shown below:
$scope.allProducts = [];
angular.forEach($scope.data,function(item, index){
angular.forEach(item.products, function(item2, index){
if($scope.allProducts.indexOf(item2.consummable) == -1){
$scope.allProducts.push(item2.consummable);
}
})
})
2) Include this in your controller:
$scope.getColumnValue = function(item,item2, index) {
var returnVal;
angular.forEach(item.products, function(val, index){
if(item2 == val.consummable){
returnVal = val.rom;
}
})
return returnVal;
}
3) The structure of the table should be like this:
<table style="border:1px solid red;">
<tr>
<td>
</td>
<td ng-repeat="itemProd in allProducts" style="border:1px solid red;">
{{itemProd}}
</td>
</tr>
<tr ng-repeat="item in data">
<td>
{{item.resource}}
</td>
<td ng-repeat="item2 in allProducts" style="border:1px solid red;">
<a>{{getColumnValue(item, item2)}}</a>
</td>
</tr>
</table>
I am working with a couple of select tags that generate an array. Previously, I was only logging the array to the console upon pressing the SUBMIT button, but now I want to save it to a separate text file. Here is my main.html code: <form method="POS ...
When working with my form, I encountered a problem involving custom input directives and text fields. In addition to these elements, there are buttons: one for adding a new input to the form which is linked to the function $scope.AddNewItem() in the contro ...
After searching through various topics, I have not found a solution that addresses my specific issue. To provide some context, we have an Angular App that operates in two modes - one mode uses one API while the other mode utilizes a different API. My goal ...
I've encountered a problem and despite searching for a solution, I haven't been able to figure it out yet. I'm hoping someone can assist me in solving this issue. Below is the code I've been working with. Thank you in advance: webpack. ...
I am trying to create a comment box similar to Facebook's, where it resizes as text fills it using Expanding Text Areas Made Elegant This is how my view looks: <div class='expandingArea'> <pre><span></span></ ...
The code below signifies a successful update of records. When the user is on the Edit section, they will see the msg just above the update button. I intend for this msg to go away as the user can still make edits to the records. What is the process to hi ...
I recently switched from using the Changes API to the PaymentIntent API and successfully set up the code. However, I noticed that every time the page loads, Stripe creates a payment intent in the dashboard with an "incomplete" payment status. Upon clickin ...
I am currently facing a challenge with converting an XML document to JSON. The issue arises when some of the string fields within the XML contain HTML tags. Here is how the original XML looks: <title> <html> <p>test</p> ...
I have a scenario where I am using ng-show with an expression that evaluates to a promise which then resolves to a boolean. This setup is resulting in a 10 digest iterations overflow error. For reference, you can view the code snippet at http://plnkr.co/e ...
Is there a way to use document.querySelector("#") on an input element (and check if it is checked) that is saved in a string and then retrieved by innerHTML? I'm having trouble figuring out how to access it. I am trying to loop through an array and l ...
Is there a library similar to Ember Js and Persistence for AngularJs, or is it in the works? Maybe there is a framework-independent solution available? What I am looking for is a library that can: Define my object model Establish relationships between m ...
One of the recognized "capabilities" in Webdriver is the "debuggerAddress," but I am having trouble finding a way to set this option in either the Capabilities class or ChromeOptions in the JavaScript API. It seems that setting the "debuggerAddress" option ...
I am working with a JavaScript array that contains objects including an id and book title. My goal is to search this array and retrieve the title based on a given id, preferably using linqjs. For example: "213-46-8915" : id "The Busy Executive's ...
I've been working on breaking down modules from a monolithic React project to store them separately in my npm registry. However, I'm encountering issues with exporting and importing them correctly. Previously, I was using the following code: con ...
In the backend code of a NodeJS application, there is an object defined as follows: { name : "foo" secret : "bar" } The objective is to return this object as JSON in response to an HTTP request without including the secret key. The desired return obj ...
Currently, I am working on a single-page website that utilizes keyboard-controlled scrolling. To achieve the desired scroll effect, I have developed a JavaScript function that animates divs. Here is the JavaScript code: var current_page = "#first"; func ...
After creating an array with dimensions 50x50 (int[][] a = new int [50][50];), I'm writing its contents into a TextView variable named "table". StringBuilder strBuild = new StringBuilder(); for(int ii = 0; ii <= pow(2,n); ii++){//strings of the t ...
Despite the conventional wisdom against it, I am exploring ways to preload a group of images before a page transition or prior to rendering my page. My specific scenario involves the need to display many large image files simultaneously and animate them on ...
Recently, I delved into the world of Django and it dawned on me that it operates as a server-side framework. Having previously worked with Vue and AngularJS, I mistakenly assumed that Django followed a similar structure due to shared features like for loop ...
Is there a solution when you click the button to display content, then click the button to hide it, and then click the button again to show it repeatedly? I'm not sure how to solve this issue. Can anyone help me out? Thank you! Here is the HTML code: ...