AngularJS rows are displayed with empty data - rest

I am testing out angularJS.
In app.js I have
function ListCtrl($scope, Restangular) {
Restangular.all("employee").getList().then(function(employee) {
$scope.employee = employee;
console.log($scope.employee.emp);
});
}
and in html I have
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Emp No</th>
<th>Name</th>
<th><i class="icon-plus-sign"></i></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee | filter:search | orderBy:'ename'">
<td>{{employee.empno}}
</td>
<td>{{employee.ename}}</td>
<td>
<i class="icon-pencil"></i>
</td>
</tr>
</tbody>
</table>
Problem I am facing is there are empty rows being displayed with no data being displayed.
What could be the reason for this?
Edit 1
JSON returned from server
{"emp":[{"empno":"7369","ename":"SMITH","hiredate":
"1980-12-17T00:00:00+03:00","job":"CLERK","mgr":"7902","sal":"800"},
{"comm":"300","empno":"7499","ename":"ALLEN","hiredate":
"1981-02-20T00:00:00+03:00","job":"SALESMAN","mgr":"7698","sal":"1600"},
{"comm":"500","empno":"7521","ename":"WARD","hiredate":
"1981-02-22T00:00:00+03:00","job":"SALESMAN","mgr":"7698","sal":"1250"},
{"empno":"7566","ename":"JONES","hiredate":
"1981-04-02T00:00:00+03:00","job":"MANAGER","mgr":"7839","sal":"2975"},
{"comm":"1400","empno":"7654","ename":"MARTIN","hiredate":
"1981-09-28T00:00:00+03:00","job":"SALESMAN","mgr":"7698","sal":"1250"},
{"empno":"7698","ename":"BLAKE","hiredate":
"1981-05-01T00:00:00+03:00","job":"MANAGER","mgr":"7839","sal":"2850"},
{"empno":"7782","ename":"CLARK","hiredate":
"1981-06-09T00:00:00+03:00","job":"MANAGER","mgr":"7839","sal":"2450"},
{"empno":"7788","ename":"SCOTT","hiredate":
"1987-04-19T00:00:00+03:00","job":"ANALYST","mgr":"7566","sal":"3000"},
{"empno":"7839","ename":"KING","hiredate":
"1981-11-17T00:00:00+03:00","job":"PRESIDENT","sal":"5000"},
{"comm":"0","empno":"7844","ename":"TURNER","hiredate":
"1981-09-08T00:00:00+03:00","job":"SALESMAN","mgr":"7698","sal":"1500"}]}
console log from chrome browser
[Object, Object, Object, Object, Object, Object, Object, Object,
Object, Object, Object, Object, Object, Object, route: "employee",
getRestangularUrl: function, addRestangularMethod: function, one:
function, all: function…]
0: Object
empno: "7369"
ename: "SMITH"
hiredate: "1980-12-17T00:00:00+03:00"
job: "CLERK"
mgr: "7902"
sal: "800"

Based on the JSON you've included it looks like $scope.employee should contain a one key called "emp", which is what you print to the console. You might need to change your ng-repeat to work with that.
Also, I'm unfamiliar with the form of your ng-repeat expression. I believe they are supposed to follow a form similar to "something in somethings" so in this case instead of just employee you may want that to be employee in employee.emp.
In a more general sense, the Angular Batarang plugin for Chrome is infinitely helpful for solving these sorts of problems.

Related

how can i parse html in flutter?

I am using Flutter and want to parse HTML using parser.dart
<div class="weather-item now"><!-- now -->
<span class="time">Now</span>
<div class="temp">19.8<span>℃</span>
<small>(23℃)</small>
</div>
<table>
<tr>
<th><i class="icon01" aria-label="true"></i></th>
<td>93%</td>
</tr>
<tr>
<th><i class="icon02" aria-label="true"></i></th>
<td>south 2.2km/h</td>
</tr>
<tr>
<th><i class="icon03" aria-label="true"></i></th>
<td>-</td>
</tr>
</table>
</div>
Using,
import 'package:html/parser.dart';
I want to get this data
Now,19.8,23,93%,south 2.2km/h
How can I do this?
Since you are using the html package, you can get the desired data like so using some html parsing and string processing (as needed), here is a dart sample, you can use the parseData function as is in your flutter application -
main.dart
import 'package:html/parser.dart' show parse;
main(List<String> args) {
parseData();
}
parseData(){
var document = parse("""
<div class="weather-item now"><!-- now -->
<span class="time">Now</span>
<div class="temp">19.8<span>℃</span>
<small>(23℃)</small>
</div>
<table>
<tr>
<th><i class="icon01" aria-label="true"></i></th>
<td>93%</td>
</tr>
<tr>
<th><i class="icon02" aria-label="true"></i></th>
<td>south 2.2km/h</td>
</tr>
<tr>
<th><i class="icon03" aria-label="true"></i></th>
<td>-</td>
</tr>
</table>
</div>
""");
//declaring a list of String to hold all the data.
List<String> data = [];
data.add(document.getElementsByClassName("time")[0].innerHtml);
//declaring variable for temp since we will be using it multiple places
var temp = document.getElementsByClassName("temp")[0];
data.add(temp.innerHtml.substring(0, temp.innerHtml.indexOf("<span>")));
data.add(temp.getElementsByTagName("small")[0].innerHtml.replaceAll(RegExp("[(|)|℃]"), ""));
//We can also do document.getElementsByTagName("td") but I am just being more specific here.
var rows = document.getElementsByTagName("table")[0].getElementsByTagName("td");
//Map elememt to its innerHtml, because we gonna need it.
//Iterate over all the table-data and store it in the data list
rows.map((e) => e.innerHtml).forEach((element) {
if(element != "-"){
data.add(element);
}
});
//print the data to console.
print(data);
}
Here's the sample output -
[Now, 19.8, 23, 93%, south 2.2km/h]
Hope it helps!
This article would probably be of help. It specifically uses the html package parser.
Following the example in the package's readme you can easily obtain a Document object. With this object you can obtain specific Elements of the DOM with methods like getElementById, getElementsByClassName, and getElementsByTagName. From there you can obtain the innerHtml of each Element that is returned and put together the output string you desire.

Selenium IDE Click on a button in a row identified by text

I am trying to get my script to click on a button called Enter Response located in the same row as a specific text (SID). I am able to locate both separately but can't seem to make both work at the same time.
The table is dynamic so I am using the SID, finding it's row and then want to click on it's response button. I.E. find text '123456' & click on 'Enter Response' found in the same row.
I tried this but am getting an error locator not found:
//tr/td/a[#class='title-abbr' and text()='123456']/following-sibling::td/a[text()='Enter Response']
Table Row Headers:
Title/Source/Source ID/SID/Create Date/(Enter Response button)/Form Type
<tr>
<td class="t-Report-cell" headers="TITLE_ABBR">this is my title</td>
<td class="t-Report-cell" headers="SOURCE_NAME">source1</td>
<td class="t-Report-cell" headers="SOURCE_NUMBER">142417</td>
<td style="background-color: rgb(13, 13, 13);" class="t-Report-cell" headers="SID_ABBR">
123456
</td>
<td class="t-Report-cell" headers="TRANSACTION_DATE">07/28/2016</td>
<td style="background-color: rgb(13, 13, 13);" class="t-Report-cell" headers="LINK" align="center">
<a style="background-color: rgb(0, 255, 255);" class="response-btn" href="f?p=58117:50:27077013481519::NO::P50_TRIGGER_ID:321860">Enter Response</a>
</td>
<td class="t-Report-cell" headers="FORM_TYPE">Questions</td>
</tr>
Any help would be greatly appreciated!
if I am looking right, you should first get to the parent node before trying to get to the next sibling....because "a" element has no sibling, so basically something like that:
//tr/td/a[#class='title-abbr' and text()='123456']/../following-sibling::td/a[text()='Enter Response']
You could also just use following-sibling::td[2] instead of selecting by text in the second part of xpath, but maybe you need it for some reason.
Btw some tips:
If the element could have multiple style classes, you will have to use contains
The same applies to text, beware of spaces etc. you should trim the text or use contains to avoid wrong selectors

WinJS Repeater table with rows (tr) wrapped in ItemContainer

Is it possible to create table using Repeater control which has rows wrapped in ItemContainer controls? Something along the line:
<table id="products">
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td>Type</td>
<td>Billing Periodicity</td>
<td>Average Life Time (in months)</td>
<td>Is default</td>
</tr>
</thead>
<tbody id="tableBody" data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: products">
<tr data-win-control="WinJS.UI.ItemContainer">
<td data-win-bind="textContent: name"></td>
<td data-win-bind="textContent: description"></td>
<td data-win-bind="textContent: type"></td>
<td data-win-bind="textContent: costPeriodicity"></td>
<td data-win-bind="textContent: averageLifeTime"></td>
<td data-win-bind="textContent: isDefault"></td>
</tr>
</tbody>
</table>
Given example throws exception at runtime:
Unable to get property 'children' of undefined or null reference
I' d like to use ItemContainer's functionality to make table rows clickable. Is my approach to the issue invalid? Is ItemContainer control wrong to use in that scenario?
Side note - if I apply ItemContainer control to table cells (td), evertything runs smoothly (they behave like windows8 - like clickable objects).
You incorrectly declared data source for repeater, it should be declared as win-options not -win-bind, when you change it to:
<tbody data-win-control="WinJS.UI.Repeater" data-win-options="{data: products}">
it should work with no problems.

Comet tables with Lift 2.4 and HTML5

I'm trying to dynamically update a HTML table via Comet. I've got something like the following:
class EventsComet extends CometClient[Event] {
def server = Event
def render = {
println("Binding on: " + defaultHtml)
data.flatMap( event =>
bind("event", "name" -> event.name.toString, "date" -> event.startDate.toString)
)
}
}
And:
<lift:comet type = "EventsComet">
<table>
<thead>
<tr>
<th>Name</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
</tbody>
</table>
</lift:comet>
This prints out the entire table over and over again, one for each event rendered by EventsComet. The println statement outputs the entire table node.
So I tried variations:
<table>
<thead>
<tr>
<th>Race</th>
<th>Track</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<lift:comet type = "EventsComet">
<tr>
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
</lift:comet>
</tbody>
</table>
As expected, the HTML5 parser strips out the [lift:comet] tags and no binding occurs.
So I tried switching the rows to:
<tr lift:comet = "EventsComet">
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
...as is shown in a snippet example here, but with this syntax my CometClient is not being instantiated at all.
Can anyone advise on the proper syntax?
EventsComet itself works fine; it can keep lists of events up to date without problem. I only run into issue using tables (and presumably other highly-nested structures I've not tried yet?).
Thank you. This is all rather frustrating for such a simple problem, and makes me want to just start implementing my templates in a strongly-typed templating language instead of using bindings.
The proper syntax seems to be:
<tr class="lift:comet?type=EventsComet">
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
From this thread:
https://groups.google.com/forum/?fromgroups=#!topic/liftweb/NUDU1_7PwmM
Sometimes I'm getting duplicate rows (inserted above the table header at that), but I'd imagine this is related to my comet actor itself.

JQuery .insertAfter() DOM elements

I have a HTML Table which in which i want to manipulate using JQuery
Table:
<tr><td>----Parent One
<Table id="ChildID" >----Child One
First TR1<TR>
<TD><div class=ExternalClass00FA6D5A488C4B2582667D6D8DF15F79>Value 1</div></TD>
<TD class="ms-disc-bordered-noleft">Value 2</TD>
<TD class="ms-disc-bordered-noleft">Value 3</TD>
<TD class="ms-disc-bordered-noleft">
Value 4
</TD></TR>
..........
Second TR2<TR>
<TD><div class=ExternalClass00FA6D5A488C4B2582667D6D8DF15F79>Value 1</div></TD>
<TD class="ms-disc-bordered-noleft">Value 2</TD>
<TD class="ms-disc-bordered-noleft">Value 3</TD>
<TD class="ms-disc-bordered-noleft">
Value 4
</TD></TR>
........and so on
</TABLE>---Child One
</td></tr></TABLE>---Parent One
i am trying to pick "Value 4" the last having string "FolderCTID" in href and insertBefore "Value 1" with div class that starts with "ExternalClass".
I want to insertBefore the each element in the row to the corresponding element in the same row
I am using following code:
$('a[href*="FolderCTID"]').insertBefore($('div[class^="ExternalClass"]'));
But it is inserting all the elements for every row....i think i should make something to specify the entities and loop around** each end of the entity...
Please help me on this
then you may want this,
try this , and let me know,
$('a[href*="FolderCTID"]').each(
function(){
$(this).parents('tr').find('div[class^="ExternalClass"]').before(this);
}
);
$('a[href*="FolderCTID"]').each(
function(){
$(this).siblings(':first').insertBefore(this);
}
)
may this help.