Knockout foreach accessing 2D json array - arrays

Hope someone can help me out with this:
I'm working with knockout and have the following json array:
[[174302,"BUSINESS - APPLICATION TO CONDUCT A BUSINESS FROM HOME.pdf",".pdf","DK89639"],[120183,"Glovent-Brochure.pdf",".pdf","DK472894"]]
inside my "consumerData" variable.
As you can see there are 2 arrays with 4 elements inside each.
Here is how I am trying to access it:
<div data-bind="foreach: consumerData" style="margin-bottom:100px;">
<table>
<tr>
<td colspan="2">
<p style="font-size:larger; margin-bottom:5px;"><a data-bind="attr: { href: 'http://someaddress/address/'+consumerData[0]+''+consumerData[2]+'?key='+consumerData[3]+'' }"><div data-bind="text: consumerData[1]"></div></a></p>
</td></tr>
</table>
</div>
So this is looping twice which is correct but how do I access my data inside each array?
PLease help!
Thanks!
Regards
Francois

You can access unnamed data within a loop by accessing the $data object (instead of consumerData again), which represents the current context
See this fiddle:
https://jsfiddle.net/5c6y46bo/
Also, you don't need to put a div inside your link to hold the text of the current object, just put the text binding within the <a> element's binding alongside the attr binding.

Related

how to get multiple object array value into view just using 1 ng-repeat in angular-laravel

i'm new with laravel and angular things. so i try to get data from 3 table and create 3 different variable with model in each variable and in angular controller i got data result as $scope.document_url. first this is my 3 object data :
and i want to know is it possible to get all 3 object into 1 in just using 1 ng-repeat? this is what i do in my angular view :
<tr md-row md-auto-select ng-repeat="(key, value) in document_url[0]">
so i want just document_url not document_url[0] to get all array value in all object in 1 ng-repeat. thanks for helping me sorry bad english. if you dont understand my explanation i will try to explain more detail.
Could you not use two ng-repeats one inside the other?
<tr md-row md-auto-select ng-repeat="outerObj in main_array">
<span ng-repeat="innerObj in outerObj">{{outerObj.Id}} - {{innerObj.Id}}</span>
</tr>

Angularjs ng-repeat : how to display an array of object

I need to display this values of an property inside an json object with ng-repeat.
"id_products" : [5730827476402176: 2, 5173045979250688: 1, 5735995932672000: 2]
I am using ng-repeat on <tr> inside a table. If the property is a simple array I can display without problems but as the object showed above I am just getting [].
This is a snippet of my code:
<tbody>
<tr class="animate-repeat" ng-repeat="item in sales|orderBy: 'name'|filter: filter">
<th> {{item.id_products}}</th>
.....
I tried nested ng-repeats but I get the same result.
What is the right way to display this object?
Thanks.
see the ng-repeat documentation - "The built-in filters orderBy and filter do not work with objects, and will throw an error if used with one.
If you are hitting any of these limitations, the recommended workaround is to convert your object into an array that is sorted into the order that you prefer before providing it to ngRepeat"
https://docs.angularjs.org/api/ng/directive/ngRepeat
This object data structure is not javascript or json valid.

Angular JS Nested ng-repeat for bootstrap badges

Im trying to tag different video items in a bootstrap table. I'm already using an ng-repeat to loop over the array of objects which store video data. I'm now trying to create a nested ng-repeat to loop over another array of "tags" within the ng-repeat that creates each table row.
I'm getting some weird results though. I was hoping that I could just put an ng-repeat on the td and then put the angular expression in a span with the boostrap class "badge". Any thoughts as to whats going wrong?
http://jsfiddle.net/jheimpel/6nh100ca/
<tr ng-repeat="topic in topics">
<td><a ng-href="#/{{topic.url}}"><i class="fa fa-play"></i></a></td>
<td>{{topic.topic}}</td>
<td>{{topic.date}}</td>
<td>{{topic.presenter}}</td>
<td ng-repeat="tag in topic.tags">
<span class="badge">{{topic.tags}}</span>
</td>
</tr>
Change it to
<span class="badge" ng-bind="tag"></span>
You're telling it to print out the array you're ng-repeating instead of the object the ng-repeat is giving you. Also ng-bind is better, see this

dynamic ng-model inside ng-repeat

I am loading data from database in JSON Format, like this: ($scope.fees):
{"1_0":"2000","1_1":"1900","1_2":"1800","1_3":"1700","1_4":"1600","1_5":"1500","1_6":"1400","1_7":"1300","2_0":"4000","2_1":"3900","2_2":"0","2_3":"0","2_4":"0","2_5":"0","2_6":"0","2_7":"0"}
This needs to be displayed in a table (like grid), in which rows and columns are not fixed. This code works for me now:
<tbody data-ng-repeat="obj in courses"><!-- Courses JSON -->
<tr><th>{{obj.name}}</th></tr>
<tr data-ng-repeat="bat in obj.batches"><!-- Each course contains Batches -->
<td>{{bat.bname}}</td>
<td data-ng-repeat="obj in categories"><!-- Columns based on categories -->
<input type="text" name="{{bat.bid}}_{{obj.id}}" data-ng-model="fees.1_0" />
</td>
</tr>
data-ng-model="fees.1_0" should be actually as provided for the name attribute: data-ng-model="fees.{{bat.bid}}_{{obj.id}}" but this doesn't work. Is there any solution to get this working? Thanks in advance.
Edit: I can change the JSON format if there is a better solution to get this done. The current format is batch<underscore>category: fees
Try data-ng-model="fees[bat.bid + '_' + obj.id]"
Check this Demo. This shows how to attach model dynamically from JSON object.May this will help you.
Just like variable keys in javascript use [] in the ng-model as the as bracket value must be your object key

Table from 2D array in AngularJS

I'm stuck on something that I was expecting with AngularJS to work out of the box without any issues, and yet strangely enough...
I'm using a JSON service that returns data as a 2D array:
$scope.data= [
["val-11", "val-12", "val-13"],
["val-21", "val-22", "val-23"]
];
From this I'm trying to generate a table like this:
<table>
<tr ng-repeat="row in data">
<td ng-repeat="col in row">{{col}}</td>
</tr>
</table>
I don't understand why AngularJS doesn't handle such a basic scenario. I can get correct $index for the parent loop, if I need it, I can iterate through the values, but only with one loop like this "col in data[0]", but I cannot get any result trying to use the nested loop as shown above.
Am I doing something wrong? It just seems to be too basic not to work right away. Please somebody help me with this bizarre issue.
In Angular 1.0.x the ng-repeat directive had numerous bugs caused by trying to "guess" whether non-object values (i.e. strings or numbers) had been added, removed or moved.
The problem is that non-objects have no identity of their own, so it is impossible to track them accurately. This was problematic in a number of cases and also caused the ngRepeat code to be bloated with loads of workarounds and edge cases.
In 1.2 we improved the syntax for ng-repeat to allow the developer to specify for themselves exactly how to identify items in a collection. This is done by the "track by" keyword. One consequence of this is that we disallow items which have the same identifier.
By default ng-repeat will try to track by the value of the item. If you have repeated items such as the same object or identical strings or numbers then ng-repeat will complain and you will see the error in the console.
var TableCtrl = function($scope) {
$scope.data= [
["", "", "val-13"]
];
}
Here the first two items in the sub-array are the same "empty" string. See this fiddle: http://jsfiddle.net/tEU8r/
If you really do want to have repeated items in the collection then you need to provide a method for ng-repeat to distinguish them. The simplest and obvious approach is to track the items by their position in the collection. This is done by using "track by $index". Here is the same example but fixed in this way:
<table ng-controller="TableCtrl">
<tr ng-repeat="row in data">
<td ng-repeat="col in row track by $index">
{{$parent.$index}}-{{$index}} {{col}}
</td>
</tr>
</table>
http://jsfiddle.net/h44Z8/
So this is not a bug in AngularJS. But you are correct that people should be aware of this change when upgrading to 1.2

Resources