Loop through array in array with Angular - javascript

Working on a TODO-app to learn Angular. I have this hardcoded array as a "database" and i want to display the tasks in the view.
var taskLists = [
{name: 'Todays todo', id: '1', tasks:['Make coffe', 'another task']},
{name: 'Tomorrow i will do this', id: '2', tasks:['Code well', 'go to bed']}
];
So how do i iterate through an array inside an array in an angular-view?
I tried to have two ng-repeats but cant get it to work right. I want to display the tasks one by one as <td>, not just the whole tasks array as one <td> as it does right now ['Make coffe', 'another task']
This is what the view looks like.
<h2 ng-repeat="object in list">{{object.name}}</h2>
<table>
<thead>
<tr>Tasks</tr>
</thead>
<tr>
<td ng-repeat="task in list">{{task.tasks}}</td>
</tr>
</table>

You have a problem in your logic.
Fist your HTML tag from child must be inside the parent.
<div class="parent" ng-repeat="object in list">
<h2>{{object.name}}</h2>
<table>
<thead>
<tr>Tasks</tr>
</thead>
<tr ng-repeat="task in object.tasks">
<td>{{item}}</td>
</tr>
</table>
</div>
Try this and check if it works.

Related

dynamic handlebar table creation

i cant dynamically create table using handlethe bars. "arrays" is an array of objects (each object has id, name, description, and category).
I dont know why the code below worked for li element insertion but not for table. Can some one help?
let arrays = [{ id: 0, name: "name0", description: "this is is name0","category":1} ,{ id: 1, name: "name1", description: "this is is name1","category":2},...]
let template =Handlebars.compile($('#template1').html())
let html = template({arrays: arrays})
$('#div1').append(html)
<template id="template1">
<table>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>description</th>
</tr>
</thead>
<tbody>
{{#each arrays}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{desciption}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
the expectation is a table with just id name and description but not category
you're trying to insert a template after having processed the compiling. Your template won't work except for the parts that are not related to handlebars. If you want to process the template once you've done the insert in your HTML file then try to do your template compiling after the append and not before.
Usually I use jquery $(document).ready(...) to do such delaying.

ng-repeat issue with JSON Object

So I'm trying to print the keys and values of a simple JSON object inside an HTML table with ng-repeat but not able to print it on the html page. The JSON object has been received from the backend and am trying to populate that in the frontend. I understand that I am doing a silly mistake somewhere but can't understand where.
JSON Object
json_data ={
user1 : "matt",
user2 : "kim",
user3 : "Tim"
}
$scope.rows = json_data;
HTML code..
<table ng-if="displayTable">
<caption>Results</caption>
<tr>
<th>Username</th>
<th>Name</th>
</tr>
<tr ng-repeat="(key, value) in rows">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
</tr>
</table>
Can't understand what silly mistake I am doing here.
Try {{rows.key}} and {{rows.value}}. Although I don't thing this is the answer. Give it a try..
Alternative ly you can try to see if it works with just one , either key or value...
First at all, the (key, value) is more well represented by (index, value).
A correct version of this piece of code will output this:
0 {"user1":"matt","user2":"kim","user3":"Tim"}
which 0 is the first index of an array and the json is the entire value.
So, i guess you are using a bad approach.
Try to modify your array to something like that:
$scope.rows = [
{key: 'user1', user: 'matt'},
{key: 'user1', user: 'kim'},
{key: 'user1', user: 'Tim'},
];
And modify your HTML to:
<table ng-if="displayTable">
<caption>Results</caption>
<tr>
<th>Username</th>
<th>Name</th>
</tr>
<tr ng-repeat="row in rows">
<td> {{row.key}} </td> <td> {{ row.user }} </td>
</tr>
</tr>
</table>

Using nested ng-repeat with object arrays angular

Here is what I am trying to do:
<tr ng-repeat = "data in tabularData track by $index" >
<td ng-repeat ="(key,value) in usedAttributes" >{{data[key]}}</td>
</tr>
This DID work when the tabular Data was structured like this:
[3920F0-3434D3-ADF-3SDF:[{CreatedBy: "John Doe", CreatedDate: "10-20-2016"}]
However when I flattened it out, it looks more like this:
[{CreatedBy: "John Doe", CreatedDate: "10-20-2016",PrimaryID:"3920F0-3434D3-ADF-3SDF"}]
This does not work. I feel like I'm missing something very obvious.
usedAttributes is just a simple object array containing attributes (column data). The idea is that the user can choose the attributes they want to get so the data table is very dynamic. For this example, the usedAttributes may look like this:
["CreatedBy": [{Checked:false}],"CreatedDate":[{Checked:true}]]
Thus the user wants to see these two attributes although more exists.
You can do this,
<div ng-controller="listController">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, value) in tabularData[0]">{{key | uppercase }}
</th>
</tr>
<tbody>
<tr ng-repeat="val in tabularData">
<td ng-repeat="cell in val">
<input type="text" ng-model="cell">
</td>
</tr>
</tbody>
</table>
</div>
DEMO

AngularJs seperate array and string in HTML template

I have a little problem with creating a dynamic HTML template. To display some data in a table, I have to separate between an ordinary String and an Array. First things first: The HTML template is included in another template using the data-ng-include directive with a controller. The controller contains my data which is essentially an object with different attributes. The objcect looks something like this and contains strings as well as arrays:
$scope.data = {
name: 'tony',
city: 'New York',
friends: ['Ann', 'Ben', 'John Doe'],
postal: 12345
};
There is also a matching array with the attributes to parse the information dynamically.
$scope.attributes = [{name: "Name", id: 'name'},
{name: "City", id: 'city'},
{name: "Friends", id: 'friends'},
{name: "Postal-code", id: 'postal'}
];
The data gets parsed inside the HTML using this code:
<table class="table table-striped">
<tbody>
<tr ng-repeat="attr in attributes">
<td>{{attr.name}}</td>
<td>{{data[attr.id]}}</td>
</tr>
</tbody>
</table>
This works absolutly fine for strings but I have to somehow determine if a attribute of data is an array to display the single records in a kind of List using ng-repeat on the record.
I tried to use Array.isArray(data[attr.id]) with an if-clause in different variations inside of <script>-tags but nothing works.
At the end the data of the friends-attribute should get displayed one below the other in the same cell like this:
Here is the code on JsFiddle
you can isArray but not directly inside ng-show.
you can use it like this.
$scope.isArray = angular.isArray;
so this way,
<tr ng-repeat="person in persons">
<td ng-repeat="attr in query.attribs">
<span ng-show="isArray(person[attr.id])">
<span ng-repeat="p in person[attr.id]">
{{p}}
</span>
</span>
<span ng-show="!isArray(person[attr.id])">
{{person[attr.id]}}
</span>
</td>
</tr>
Here is your updated Fiddle
You have to do some script and html changes if the value is an array like this Updated fiddle here : jsfiddle.net/Lt024p9h/7/
Do Something Like this.
<tr ng-repeat="person in persons">
<td ng-repeat="attr in query.attribs">
<span ng-show="isArray(person[attr.id])">
{{person[attr.id].toString()}}
</span>
<span ng-show="!isArray(person[attr.id])">
{{person[attr.id]}}
</span>
</td>
</tr>

Mustache Template with Nested Array of Objects

Could use a little help figuring out why my Mustache template isn't rendering properly. I'm very confused why the following isn't working. I'm sure it's a minor stupid mistake of mine or something...
var tableRows = [
{name: 'name1',
values: ['1','2','3']},
{name: 'name2',
values: ['1','2','3']},
{name: 'name3',
values: ['1','2','3']}
];
var template = $('#mustache-template').html();
$('#target').append(Mustache.render(template, {rows: tableRows}));
HTML Template:
<div id="mustache-template">
<table>
<tbody>
{{#rows}}
<tr class="">
<td>{{name}}</td>
{{#values}}
<td>{{.}}</td>
{{/values}}
</tr>
{{/rows}}
</tbody>
</table>
</div>
I'm expecting a table with each array item being its own row, but instead I'm getting this:
[object Object]
Here's a jsFiddle to illustrate: http://jsfiddle.net/gF9ud/
The problem is that the browser handles your template as an invalid table element. It's not a good idea to store your templates on a page like that, use <script type="text/template"> to wrap them:
<script id="mustache-template" type="text/template">
<table>
{{#rows}}
<tr class="">
<td>{{name}}</td>
{{#values}}
<td>{{.}}</td>
{{/values}}
</tr>
{{/rows}}
</table>
</script>
http://jsfiddle.net/zHkW5/
Another solution that I found works is to comment out the mustache like so:
<div id="mustache-template">
<table>
<tbody>
<!-- {{#rows}} -->
<tr class="">
<td>{{name}}</td>
{{#values}}
<td>{{.}}</td>
{{/values}}
</tr>
<!-- {{/rows}} -->
</tbody>
</table>
</div>
For me, it rendered exactly as I had hoped. I think the browser kind of freaks seeing code between tr tags.

Categories