I am using xml2json to translate a xml file from medline. I am stuck on using ng-repeat to display the information I need. I need to display the title,url and see-reference. When i have one health-topic in the xml file The title and url display fine. When I add more health-topics it does not work. any help is appreciated, thanks
plunkr
<table>
<tr ng-repeat="topic in topics">
<td>{{topic._title}}</td>
<td>{{topic._url}}</td>
<td>{{topic.see-reference}}</td>
</tr>
</table>
<pre>{{topics | json}}</pre>
The structure of your XML is like this:
<health-topics total="1909" date-generated="01/03/2015 02:30:35">
<health-topic title="Abdominal Pain">
</health-topic>
<health-topic title="Abdominal Pain">
</health-topic>
<health-topic title="Abdominal Pain">
</health-topic>
xml2json creates an object for every element. The properties of the object are the element's attributes (starting with an underscore) and the child elements. In your case:
//health-topics
{
_total: "1909",
_date-generated: "01/03/2015 02:30:35",
health-topic: [
{
_title: Abdominal Pain"
...
health-topic is an array containing the topics. If you have a single topic wrapped with health-topics it would be:
//health-topics
{
_total: "1909",
_date-generated: "01/03/2015 02:30:35",
health-topic: {
_title: Abdominal Pain"
...
health-topic is now an object. But maybe a single topic wouldn't even be wrapped with a health-topics element. That's something only you know.
All in all the data structure is different depending on the number of topics. You would need to check and adapt to that. The code working for multiple topics would be
$scope.topics = $scope.dom['health-topics']['health-topic']
Related
I currently have an ask to provide a "Lookup Table Management" interface to super users of an app I'm working on. They want to make changes to lookup tables that are used throughout the app (they won't be able to change IDs, of course).
I'd like to come up with a way to generically handle this without having to create a form for each LUT. Or if there is a plugin I don't know about that would be even better
All the LUTS are vastly different from each other in terms of fields. I'm trying to write a loop to loop through all the fields of a LUT object and then spit out the values for each object of that LUT.
Example:
DrinksLut
String name
Double price
Integer numSold
PetsLut
String name
Integer age
String breed
String size
Boolean fixed
I'm trying to provide a table output that lists the field properties as headers as well as the individual object values for rows depending on the LUT they choose to edit (Pets, Drinks, etc.)
Current Code
def resultList() {
def selectedLut = grailsApplication.getClassForName(params.lutFilter?.replace('class ', ''))
/* get field names, types and a "user friendly" name to use in the table header */
def objProps = new DefaultGrailsDomainClass(selectedLut)?.persistentProperties.collect {
[
name: it.name,
type: it.type,
friendlyName: Helper.splitCamelCase(it.name)
]
}
/* get all rows for the chosen LUT */
def results = selectedLut.getAll()
render(template: '../lookupTable/resultList', model:[results: results, objProps: objProps])
}
...
<table id="lutTable" class="col-xs-12">
<thead>
<tr>
<g:each in="${objProps}">
<th>${it.friendlyName}</th>
</g:each>
</tr>
</thead>
<tbody>
<g:each in="${results}">
<tr>
<td>${it}</td> <!-- this currently is the object of a LUT and I need to get each of its field properties and values to spit out here -->
</tr>
</g:each>
</tbody>
</table>
I'd greatly appreciate any assistance or ideas! The app s using Grails 2.5.5
I am using the component ngx-datatable in my angular app and I am trying to update the header texts dynamically.
What I was trying was the following:
<ngx-datatable-column prop="day_1" name="{{day_1_header}}">
and updating the day_1_header property dynamically, but when I do so the change is never reflected.
I have also tried adding a ViewChild and changing the name directly like so:
HTML:
<ngx-datatable-column #dataTable1 prop="day_1" name="{{day_1_header}}">
TS:
#ViewChild('dataTable1') dataTable1;
[..]
this.dataTable1.nativeElement.name = "test";
When I check the properties of my dataTable1 object the new name is set.
So can anyone tell me how to rerender/sync the datatable headers?
Thanks!
Damn...
Tried forever, asked the question and found a solution right away.
It worked by adding an explicit header-template to the column like this:
<ngx-datatable-column>
<ng-template let-column="column" ngx-datatable-header-template>
{{day_1_header}}
</ng-template>
</ngx-datatable-column>
Maybe it helps someone someday.
I have no idea why the other answer (which seems pretty direct and logical) didn't work for me. Maybe breaking change in higher version.
This GitHub issue gives another perspective on how to achieve it.
There's also this example in the source code that shows it.
Basically, you'll need the custom template for the column header
<ngx-datatable
class="material"
[rows]="rows"
[columns]="columns"
[columnMode]="ColumnMode.force"
[headerHeight]="50"
[footerHeight]="50"
rowHeight="auto"
>
</ngx-datatable>
<!-- custom column header template -->
<ng-template #hdrTpl let-column="column"> <strong>Fancy</strong>: {{ column.name }} !! </ng-template>
Then access it in your component class with #ViewChild() decorated property.
export class TemplateRefTemplatesComponent {
#ViewChild('hdrTpl', { static: true }) hdrTpl: TemplateRef<any>;
rows = [];
columns = [];
ColumnMode = ColumnMode;
constructor() {
}
ngOnInit() {
// You'll need to map over all columns to use it in all
this.columns = this.columns.map(columns => ({...columns, headerTemplate: this.hdrTpl});
}
}
I'm creating an application to manage restaurant orders.
I create the menu from $http so I've this list:
<div class="row vertical" style="background-image: url(/gest/images/etichette/ANTIPASTI.png);border-color: #0CF">
<div class="card piatti col s2" ng-repeat="anti in antis | filter:{tipo:'ANTIPASTI'}">
<div class="card-content"> <span class="card-title truncate red darken-3">{{anti.piatto}}</span> </div>
<div class="card-action"> {{n}}</div>
</div>
</div>
The div with class "row vertical" contain one time starters, then pasta, then beef ecc.
So I use ng-repeat each time, and filter by tipo.
My question is: is there any way to make ng-repeat only one time to show all menu (orderer before by starters, then pasta, beef ecc)?
I have this data (is a restaurant menu):
piatto: name of the the dish
tipo: category of the dish (like pasta, beef, fish, starters ecc)
I would show with only one repeat all the dishes ordered so:
starters, pasta, beef, fish, dessert etc.
And I would create each time a new row
From what I understand you already have all your date on the antis and you just want to filter it by type or do you want to OrderIt by a certain type?
This fiddle for example would order by name, but you can also provide an array with functions to retrieve each type in the way that you like, you can read about it here.
But basically you'd do
anti in antis | orderBy:'+tipo'
or
anti in antis | orderBy: [ function(){}, function(){} ]
EDIT:
As #yarons mentioned you can also chain strings to filter even further. I've updated the Fiddle so now the filter would be anti in antis | orderBy:['+tipo', '+piato']" which indicates that first the tipo would be alphabetically ordered ascending (+ indication) and after that the piato would also be alphabetically ascending.
If you'd want to define a different order than the alphabetical one I think you can use a sort of ENUM for the tipo as in:
var tipoENUM = {};
tipoENUM['ANIPASTI'] = 0;
tipoENUM['PASTA'] = 1;
tipoENUM['PIZZA'] = 2;
tipoENUM['BEEF'] = 3;
tipoENUM['DESERT'] = 4;
So that way you'd avoid using the string for the order, see following fiddle for the example.
EDIT 2:
Ok, so if you receive the data via the HTTP request it's better if you create a order function to help you, check this updated fiddle, like so:
// The enum would be defined as before but:
$scope.orderTipo = function (dish) {
return tipoENUM[dish.tipo];
}
On the HTMl you'll do:
ng-repeat="anti in antis | orderBy:[orderTipo, '+piato']"
Ok your example is perfect but I would repeat each time the "tipo" and then the relative "piato" in a list....something like this:
ANTIPASTI
- bruschetta
- suppli
- fritto
PRIMI
- caqrbonara
- amatriciana
etc.
Is it possible?
I know that we can easily use ng-repeat for json objects or arrays like:
<div ng-repeat="user in users"></div>
but how can we use the ng-repeat for dictionaries, for example:
var users = null;
users["182982"] = "{...json-object...}";
users["198784"] = "{...json-object...}";
users["119827"] = "{...json-object...}";
I want to use that with users dictionary:
<div ng-repeat="user in users"></div>
Is it possible?. If yes, how can I do it in AngularJs?
Example for my question:
In C# we define dictionaries like:
Dictionary<key,value> dict = new Dictionary<key,value>();
//and then we can search for values, without knowing the keys
foreach(var val in dict.Values)
{
}
Is there a build-in function that returns the values from a dictionary like in c#?
You can use
<li ng-repeat="(name, age) in items">{{name}}: {{age}}</li>
See ngRepeat documentation. Example: http://jsfiddle.net/WRtqV/1/
I would also like to mention a new functionality of AngularJS ng-repeat, namely, special repeat start and end points. That functionality was added in order to repeat a series of HTML elements instead of just a single parent HTML element.
In order to use repeater start and end points you have to define them by using ng-repeat-start and ng-repeat-end directives respectively.
The ng-repeat-start directive works very similar to ng-repeat directive. The difference is that is will repeat all the HTML elements (including the tag it's defined on) up to the ending HTML tag where ng-repeat-end is placed (including the tag with ng-repeat-end).
Sample code (from a controller):
// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...
Sample HTML template:
<div ng-repeat-start="(id, user) in users">
==== User details ====
</div>
<div>
<span>{{$index+1}}. </span>
<strong>{{id}} </strong>
<span class="name">{{user.name}} </span>
<span class="age">({{user.age}})</span>
</div>
<div ng-if="!$first">
<img src="/some_image.jpg" alt="some img" title="some img" />
</div>
<div ng-repeat-end>
======================
</div>
Output would look similar to the following (depending on HTML styling):
==== User details ====
1. 119827 Stephan (18)
======================
==== User details ====
2. 182982 John (30)
[sample image goes here]
======================
==== User details ====
3. 198784 Antonio (32)
[sample image goes here]
======================
As you can see, ng-repeat-start repeats all HTML elements (including the element with ng-repeat-start). All ng-repeat special properties (in this case $first and $index) also work as expected.
JavaScript developers tend to refer to the above data-structure as either an object or hash instead of a Dictionary.
Your syntax above is wrong as you are initializing the users object as null. I presume this is a typo, as the code should read:
// Initialize users as a new hash.
var users = {};
users["182982"] = "...";
To retrieve all the values from a hash, you need to iterate over it using a for loop:
function getValues (hash) {
var values = [];
for (var key in hash) {
// Ensure that the `key` is actually a member of the hash and not
// a member of the `prototype`.
// see: http://javascript.crockford.com/code.html#for%20statement
if (hash.hasOwnProperty(key)) {
values.push(key);
}
}
return values;
};
If you plan on doing a lot of work with data-structures in JavaScript then the underscore.js library is definitely worth a look. Underscore comes with a values method which will perform the above task for you:
var values = _.values(users);
I don't use Angular myself, but I'm pretty sure there will be a convenience method build in for iterating over a hash's values (ah, there we go, Artem Andreev provides the answer above :))
In Angular 7, the following simple example would work (assuming dictionary is in a variable called d):
my.component.ts:
keys: string[] = []; // declaration of class member 'keys'
// component code ...
this.keys = Object.keys(d);
my.component.html: (will display list of key:value pairs)
<ul *ngFor="let key of keys">
{{key}}: {{d[key]}}
</ul>
I am creating pdf file and I have done creating pdf for one product's detail.
i have also completed creating pdf in loop.
I have table structure for displaying information.
so I have to add foreach loop within table structure wrapping and tag.
so how do I get it done?
can anyone help me..
Thanks..
'App::import('Vendor','xtcpdf');
$tcpdf = new XTCPDF();
$textfont = 'freesans';
$tcpdf->SetAutoPageBreak( false );
$tcpdf->xheadercolor = array(255,255,255);
$tcpdf->AddPage();
$tcpdf->SetTextColor(0, 0, 0);
$tcpdf->SetFont($textfont,'',10);
$html = <<<EOD
<table>
foreach($Orderdata as $odata) //this I want to do
{
<tr>
<td> $odata['tablename']['fieldname'] //i am not able to access this variable like this
</td> $odata['tablename']['fieldname']
<td>
</td>
</tr>
}
</table>
'
/// code for outputting
yes we can do that
use foreach() to repeater objects and based on that data generate the PDF and store at some location and you can make array of the display path of each file
pass this array to the object of the view and you can use that in the view file you can also set as download link
like foreach loop and set your code in that
Thanks