We Keep Coding

Using *ngFor to display string values from array

I have an array which is created from splitting a string using str.split() and this creates an array and it looks like this:
var array = [
"TEXT1,1234,4321,9876",
"TEXT2,2345,5432",
"TEXT3,6543,3456"
]
I want to be able to display this information in a table using *ngFor.
I have tried this (from this question):
<tr>
<td *ngFor="let info of array">{{info.join(",")}}</td>
</tr>
But I get this error:
ERROR TypeError: _v.context.$implicit.join is not a function
at Object.eval [as updateRenderer]
The table should look like this:
TITLE | VALUE1 | VALUE2 | VALUE3
--------------------------------
TEXT1 | 1234 | 4321 | 9876
--------------------------------
TEXT2 | 2345 | 5432 |
--------------------------------
TEXT3 | 6543 | 3456 |
How do I achieve this table?

To make array from string with , delimiters use String.prototype.split method
<tr *ngFor="let row of array">
<td *ngFor="let info of row.split(',')">{{info}}</td>
</tr>
Ng-run Example

You will need two *ngFors. One to loop through each item in the array and one to iterate through each item in the array that you'll create by splitting the string with ,
Give this a try:
<table border="1">
<thead>
<tr>
<td>TITLE</td>
<td>VALUE 1</td>
<td>VALUE 2</td>
<td>VALUE 3</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of array">
<td *ngFor="let column of row.split(',')">
{{ column }}
</td>
</tr>
</tbody>
</table>
Here's a Working Sample StackBlitz for your ref.

How to only trigger parent ng-click event for target child element

Have a click event ng-click="$ctrl.toggleSub(state)" in the first row that is triggering the ng-if="showSubCat" event in the second row. This makes the second row appear when I click.
The problem is that it's causing all of the ng-repeat options to appear vs just the one I clicked.
For instance I'm getting:
Parent
- Child
- Child
Parent
- Child
- Child
I would like it to behave like this:
Parent
- Child
- Child
Parent
I only want the clicked ng-repeat options to expand accordingly. I've tried passing in the state object but am not having any luck. Any help would be greatly appreciated
toggleSub(state) {
this.$log.log(state)
this.$scope.showSubCat = !this.$scope.showSubCat
}
<tr md-row ng-repeat-start="state in country.states | orderBy: query.order">
<td md-cell><a ng-click="$ctrl.toggleSub(state)">{{state.name}}</a></td>
<td md-cell>-</td>
<td md-cell>{{state.totalCount}}</td>
</tr>
<tr md-row ng-repeat-end
ng-repeat="subcat in state.data | orderBy: 'subcategory'"
ng-if="showSubCat">
<td md-cell></td>
<td md-cell>{{subcat.subcategory}}</td>
<td md-cell>{{subcat.count}}</td>
<td md-cell>{{subcat.percentage}}</td>
</tr>

Make the showSubCat boolean a property of the state iteration object:
toggleSub(state) {
this.$log.log(state)
//this.$scope.showSubCat = !this.$scope.showSubCat
state.showSubCat = ! state.showSubCat;
}
<tr md-row ng-repeat-start="state in country.states | orderBy: query.order">
<td md-cell><a ng-click="$ctrl.toggleSub(state)">{{state.name}}</a></td>
<td md-cell>-</td>
<td md-cell>{{state.totalCount}}</td>
</tr>
<!-- BEFORE
<tr md-row ng-repeat-end
ng-repeat="subcat in state.data | orderBy: 'subcategory'"
ng-if="showSubCat">
-->
<!-- AFTER -->
<tr md-row ng-repeat-end
ng-repeat="subcat in state.data | orderBy: 'subcategory'"
ng-if="state.showSubCat">
<!-- -->
<td md-cell></td>
<td md-cell>{{subcat.subcategory}}</td>
<td md-cell>{{subcat.count}}</td>
<td md-cell>{{subcat.percentage}}</td>
</tr>
By making the showSubCat boolean part of the state iteration object, it will be different for each item in the parent ng-repeat.

How to display a multi dimensional array as a table?

This problem's been haunting me for days... I have the following JSON that I'm trying to render as a table using Tempo.js but keep getting nothing rendered:
[
{
"id":"xxxxxxxxxxxxxxxxxxxxxxxxxx",
"name":"Family One",
"parents":[
{
"id":"yyyyyyyyyyyyyyyyyyyyyyyyyy",
"name":"John Doe",
"children":[
{
"id":"zzzzzzzzzzzzzzzzzzzzzzzzz",
"name":"Fabrice A",
"description":"Good kid",
"Age":"20",
"Weight":"60"
}
]
},
{
"id":"hhhhhhhhhhhhhhhhhhhhhhhhhh",
"name":"Jane Doe",
"children":[
{
"id":"wwwwwwwwwwwwwwwwwwwwwwww",
"name":"Maurice A",
"description":"Bad kid",
"Age":"22",
"Weight":"50"
}
]
}
]
},
{
"id":"xxxxxxxxxxxxxxxxxxxxxxxxxx2",
"name":"Family Two",
"parents":[
{
"id":"yyyyyyyyyyyyyyyyyyyyyyyyyy2",
"name":"Sonny Doe",
"children":[
{
"id":"zzzzzzzzzzzzzzzzzzzzzzzzz2",
"name":"Juan B",
"description":"Good kid",
"Age":"30",
"Weight":"70"
},
{
"id":"zzzzzzzzzzzzzzzzzzzzzzzzz3",
"name":"Alberto B",
"description":"Fine kid",
"Age":"20",
"Weight":"60"
},
{
"id":"zzzzzzzzzzzzzzzzzzzzzzzzz4",
"name":"Roberto B",
"description":"Medium kid",
"Age":"10",
"Weight":"50"
}
]
}
]
}
]
The table is supposed to look like this:
_______________________________________________________________________________________
| FAMILY NAME | PARENTS | CHILD NAME | CHILD DESCRIPTION | CHILD AGE | CHILD WEIGHT |
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
| Family One | John Doe | Fabrice A | Good kid | 20 | 60 |
| |''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
| | Jane Doe | Maurice A | Bad kid | 22 | 50 |
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
| Family Two | Sonny Doe | Juan B | Good kid | 30 | 70 |
| | | Alberto B | Fine kid | 20 | 60 |
| | | Roberto B | Medium kid | 10 | 50 |
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Please notice how the family cell stretches to house more than one parent rows, and the parent cell streches to house more than one children rows.
I prepare the JSON in js in a variable called familyTree, and then call Tempo.prepare('family-list').render(familyTree);
No I've read all of the documentation for tempo.js (which wasn't too long), but I still haven't found a way of rendering the table properly. Here's what I got so far:
<div id="family-list">
<table id="families">
<tr data-before-template='data-before-template'>
<th>
FAMILY NAME
</th>
<th>
PARENTS
</th>
<th>
CHILD NAME
</th>
<th>
CHILD DESCRIPTION
</th>
<th>
CHILD AGE
</th>
<th>
CHILD WEIGHT
</th>
</tr>
<tr data-template='data-template'>
<td id="family-column">
{{name}}
</td>
<td id="parent-column" data-template-for='parents'>
{{name}}
</td>
<td colspan="4">
<table id='children-table' data-template-for="children">
<tr>
<td>
{{name}}
</td>
<td>
{{description}}
</td>
<td>
{{age}}
</td>
<td>
{{weight}}
</td>
</tr>
</table>
</td>
</tr>
I've used tempo before. I've even mixed it with wkhtmltopdf to render some nice-looking pdf files. But I just cannot solve this. If any of you out there has been through anything similar..would you please share your experience? Thanks so much in advance.

Using tempo.js is not ideal to render hierarchical data in a table. To render hierarchical data, tempo.js requires that the HTML elements also exists in a hierarchy. This is not ideal when dealing with tables, because creatign a table inside a table cell will eventually lead to column alignment issues. You can take care of alignment issues to a certain degree by fixing the width of each column, but this will not be a perfect solution.
Having said above, I've fixed your HTML markup to render your JSON data using tempo.js. See the changes below (jsfiddle here):
<div id="family-list">
<table id="families">
<tr data-before-template='data-before-template'>
<th width="100px">
FAMILY NAME
</th>
<th width="100px">
PARENTS
</th>
<th width="100px">
CHILD NAME
</th>
<th width="150px">
CHILD DESCRIPTION
</th>
<th width="50px">
CHILD AGE
</th>
<th width="50px">
CHILD WEIGHT
</th>
</tr>
<tr data-template='data-template'>
<td id="family-column">
{{name}}
</td>
<td colspan="5">
<table cellpadding="0">
<tr data-template-for='parents'>
<td width="100px">
{{name}}
</td>
<td>
<table id='children-table' cellpadding="0">
<tr data-template-for="children">
<td width="100px">
{{name}}
</td>
<td width="150px">
{{description}}
</td>
<td width="50px">
{{Age}}
</td>
<td width="50px">
{{Weight}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

Insert multiple rows in a cell in HTML Table

I am trying to insert rows within a cell in HTML Table using jquery, I want something like this:
--------------
ID | Sec | Div
--------------
1 | S1 | D1
| S2 | D2
| S3 | D3
--------------
2 | S3 | D3
| S4 | D4
| S5 | D5
--------------
Here is what I have so far:
function insertRows(this){
var Rows1 = '<tr><td> S1 </td></tr><tr><td> S2 </td></tr><tr><td> S3 </td></tr>'
var Rows2 = '<tr><td> S3 </td></tr><tr><td> S4 </td></tr><tr><td> S5 </td></tr>'
this.srcElement.parentElement.nextSibling.outerHTML = Rows1
this.srcElement.parentElement.nextSibling.nextSibling.outerHTML = Rows2
}
What is does is, it inserts all in the same Row, something like this:
---------------------
ID | Sec | Div
---------------------
1 | S1S2S3 | D1D2D3
---------------------
2 | S3S4S5 | D3D4D5
---------------------
How can I make this to work?

You Can Fullfill your requirement without using jquery
just Paste this Code inside body tag
<table>
<tr>
<td >ID</td>
<td>SEC</td>
<td>DIV</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>S1</td>
<td>D1</td>
</tr>
<tr>
<td>S2</td>
<td>D2</td>
</tr>
<tr>
<td>S3</td>
<td>D3</td>
</tr>
<tr><td colspan="3">---------------------</td></tr>
<tr>
<td>ID</td>
<td>SEC</td>
<td>DIV</td>
</tr>
<tr>
<td rowspan="3">2</td>
<td>S1</td>
<td>D1</td>
</tr>
<tr>
<td>S2</td>
<td>D2</td>
</tr>
<tr>
<td>S3</td>
<td>D3</td>
</tr>
</table>
here you can find live example http://jsfiddle.net/Anujyadav123/AdQy3/

.innerHTML is rather broken when dealing with tables, at least under IE.
Your choices are:
Restrict the use of .innerHTML to only change the contents of a td element.
Use .innerHTML to replace the ENTIRE table structure
Use DOM methods to manipulate table rows and table cells.
https://developer.mozilla.org/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

take a look here Add colspan and rowspan on table on the fly
OR
is it important to add row, if not you are able to add your values into cell
Example:
function showP(){
txt1 = $($('#myTable').find('TR').find('TD')[1]).html()+'</br>S1'
txt3 = $($('#myTable').find('TR').find('TD')[3]).html()+'</br>D1'
$($('#myTable').find('TR').find('TD')[1]).html(txt1 )
$($('#myTable').find('TR').find('TD')[3]).html(txt3 )
}

jquery match element based on id

I'm a noob to jquery. Stuck and would appreciate some help.
Currently building a tool to grab data from a particular page. The page looks like this:
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1">
<tbody> //This is data group 1
<tr id="parent0"> //Record 1
<td align="left"> <---------- text1 here -------> </td>
<td align="left"> <---------- text2 here -------> </td>
<td align="left"> <---------- text3 here -------> </td>
</tr>
<tr id="parent0"> //Record 2
<td align="left"> <---------- text1 here -------> </td>
<td align="left"> <---------- text2 here -------> </td>
<td align="left"> <---------- text3 here -------> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1">
<tbody> //This is data group 2
<tr id="child0"> //Record 1
<td align="left"> <---------- text1 here -------> </td>
<td align="left"> <---------- text2 here -------> </td>
<td align="left"> <---------- text3 here -------> </td>
</tr>
<tr id="child0"> //Record 2
<td align="left"> <---------- text1 here -------> </td>
<td align="left"> <---------- text2 here -------> </td>
<td align="left"> <---------- text3 here -------> </td>
</tr>
</tbody>
</table>
Below is a snippet of the jquery:
ancestor = $(this).closest("tr[id]");
matchedElement = $(this).first();
originalBgColor = $(matchedElement).css('background-color');
$(matchedElement).css('background-color', 'green');
$(matchedElement).bind('click.annotator', function(event) {
event.stopPropagation();
event.preventDefault();
self.port.emit('show',
[
document.location.toString(),
$(ancestor).attr("child0"),
$(matchedElement).text()
]
I'm trying to capture all data from just the <tr> blocks with id parent0, and child0.
In it's current working state, the tool captures all data within the two tables as text. Ideally I'd like to be able to capture all the <TR> blocks separately, put them in an array that I can then iterate over.

It looks like you are using ID elements where you should be using a class.
Instead of
<tr id="child0">
<tr id="parent0">
Do this
<tr class="child0">
<tr class="parent0">
Unlike ID, you can assign the same value to multiple elements with the class attribute.
Then you can select them all like this
$("tr.child0,tr.parent0").each(
function() {
//this will be fired for each matched element
$(this).doSomething();
}
)

$('tr[id="child0"]').each(function() {
//this will be fired for each matched element
$(this).doSomething();
}
);
this way you will get all tr whose id is child0
check this link for more reference http://api.jquery.com/category/selectors/

DO like that...
$('cite.fn:contains(blabla)').css('color', 'red');
Edit: though that will match "blablablabla" as well.
$('cite.fn').each(function () {
if ($(this).text() == 'blabla') {
$(this).css('color', 'red');
}
});
That should be more accurate.
Edit: Actually, I think this solution is more elegant:
$('cite.fn').filter(function () {
return $(this).text() == 'blabla';
}).css('color', 'red');;