Please help me to render below XML data in the form of table using AngularJS
<EmployeeDetail>
<employeeID>1564654</employeeID>
<employeeName>Vinit</employeeName>
<emailID>xyz#email.com</emailID>
</EmployeeDetail>
<EmployeeDetail>
<employeeID>14654</employeeID>
<employeeName>Varun</employeeName>
<emailID>xyz#email.com</emailID>
</EmployeeDetail>
Help me in this case as soon as possible
$http.get('someUrlforXml').then(function(response) {
$scope.EmployeeDetail = [];
/*setting up the response*/
var data = x2js.xml_str2json(response.data);
$scope.EmployeeDetail = data.EmployeeDetail;
if it is not work for you try this link
Related
We are using ui-grid in our application. We are using grouping functionality of ui-grid and it's working perfectly.
Now we are exporting it to CSV and at this point I am facing issue. It is exporting same it's showing on grid. But we don't want that group row highlighted in attached image. We are only looking for rows which contains all the data in this case count is 4. Can someone please help to fix this issue.
We are using below code to export it in CSV:
var exportColumnHeaders = exportService.getColumnHeaders(grid, uiGridExporterConstants.VISIBLE);
var exportData = exportService.getData(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE);
var csvContent = exportService.formatAsCsv(exportColumnHeaders, exportData, grid.options.exporterCsvColumnSeparator);
exportService.downloadFile(fileName, csvContent, grid.options.exporterOlderExcelCompatibility);
This plunk is my attempt to convert an HTML table to a Javascript array using only AngularJS/jqLite. I can get the head and body from the table, however when I try to get the rows from the body object I get the following error (see the console): tbody.children is not a function. How to fix this?
Javascript
var table = angular.element($scope.t);
var thead = table.children()[0];
var tbody = table.children()[1];
console.log(tbody.children());
I've not used this API before, but a quick check reveals that you lose the angular.element benefits when you pick the children(). You can wrap it again like this to access children method again:
var table = angular.element($scope.t)
var thead = angular.element(table.children()[0])
var tbody = angular.element(table.children()[1])
console.log(tbody.children());
NOTE: the following code and demo are extracted from a larger Meteor + Angular project.
I have the following functions to select and delete objects:
DEMO: http://plnkr.co/edit/Qi8nIPEd2aeXOzmVR6By?p=preview
$scope.selectParty = function(party) {
$scope.party = party;
$scope.type = party.type;
$scope.date = party.date;
}
$scope.deletParty = function(party) {
$scope.parties.remove(party);
}
$scope.selectOrganizer = function(organizer) {
$scope.organizer = organizer;
$scope.name = organizer.name;
$scope.title = organizer.title;
}
$scope.deletOrganizer = function(organizer) {
$scope.party.organizers.remove(organizer);
}
The Select action works on both Parties and Organizers as you can see in the demo, displaying the data in the table underneath.
The Delete action doesn't work. Although, let me point out that in my app, the one I have on my machine and currently working on in Meteor, the Delete action works splendidly on Parties, meaning the syntax "$scope.parties.remove(party)" works. But it doesn't work on the plnkr demo for some reason :(
My question is really about the Organizers Delete action, where I'm targeting an object (organizer) inside an array inside the selected object (party)… that one doesn't work. I'm wondering why, and what is the right syntax.
NOTE 2: I'm aware of Angular's splice and index but I can't use them here as I'm not simply working with Angular arrays but with database data in Meteor.
Thanks!
The organizer is a part of the party object and not a collection on it's own. So what you would need to do is remove the party from the object and then save the party object.
Note2 is incorrect. Unless you wrote your question and plunker wrong.
I'm trying to create a website where users can come and look for a set of resources, something like a portal, or a database like JSTOR. I am using Weebly; this website will eventually be turned over to someone who does not know computers well, so I'm trying to keep things simple (and free, where doable).
My thought was to use Google Spreadsheets/Forms to handle the input and storage of the data for each individual resources (Title, Author, Type, Topic, Country, etc.), and then find some some method of creating a search function that could placed on the website. Any user could arrive at the site, put in whatever criteria they want to look for, and any resources in the database would be listed out for the user to further investigate. Users would not be adding data to the spreadsheets; only querying it for data.
My first question is such a script/arrangement possible and can it be embedded into a website page? My second question is what would the best approach be?
Yes this is certainly possible, but can achieved in a variety of ways.
One approach you could take with this is to retrieve all the data from the spreadsheet as JSON format and add it to the DOM as a HTML table. Then you can use a nice plugin like dataTables which has a pretty good native search function. I'll give a basic example below.
To retrieve the data you can use Googles spreadsheet JSON API. A basic example is below.
<script src="http://spreadsheets.google.com/feeds/cells/*ID*/*WS*/public/values?alt=json-in-script&callback=*FN*"></script>
Where ID is the spreadsheet's long ID.
Where WS is the worksheet number e.g. 1,2,3 etc.
Where FN is the function you want to call. In my below function i use importGSS
Then I've written the below script that adds the data to a HTML table. It first adds the first row to a <thead> section and then adds the rest to the <tbody> section.
function cellEntries(json, dest) {
var table = document.createElement('table');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
var thr;
var tr;
var entries = json.feed.entry;
var cols = json.feed.gs$colCount.$t;
for (var i=0; i <cols; i++) {
var entry = json.feed.entry[i];
if (entry.gs$cell.col == '1') {
if (thr != null) {
tbody.appendChild(thr);
}
thr = document.createElement('tr');
}
var th = document.createElement('th');
th.appendChild(document.createTextNode(entry.content.$t));
thr.appendChild(th);
}
for (var i=cols; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
if (entry.gs$cell.col == '1') {
if (tr != null) {
tbody.appendChild(tr);
}
tr = document.createElement('tr');
}
var td = document.createElement('td');
td.appendChild(document.createTextNode(entry.content.$t));
tr.appendChild(td);
}
$(thead).append(thr);
$(tbody).append(tr);
$(table).append(thead);
$(table).append(tbody);
$(dest).append(table);
$(dest + ' table').dataTable();
}
You can then call back the function with ... where #Destination is the <div> you want to add the HTML table to.
function importGSS(json){
cellEntries(json, '#Destination');
};
Once all completed you'll see something like the below screenshot, the top the final results and the bottom the original spreadsheet. I've edited out some information. I hope this has been of some help.
What is better way to pass some parameters(mbe post, get, cookie?) from one page to another to extjs script(second is the simple grid with json store)?
thx.
Better than what?
I use this function to get values from url string
Ext.ns('MyNamespace');
MyNamespace.get = function(key) {
var params = Ext.urlDecode(window.location.search.substring(1));
return params[key] || null;
}
//example usage
var ID = MyNamespace.get('ID');
I use it rarely however. Most of my components use Ext.Ajax.request() calls to get any parameters straight from the server.