I am getting the following json from a database, and I want to do an ngfor;but I don't know how to do it with this kind of JSON
link codebeautify.org
<div class="col-md-4" *ngFor="let referencia of referencias.rows">
<div class="card text-center">
<div class="card-header">
</div>
<div class="card-body">
{{referencia.2}}
</div>
</div>
</div>
You need to parse your json return from the API first before using it:
In the ts file where you receive your data:
referencias = JSON.parse(referencias);
And since each referencia from referencias.rows is an Array, you access it data like this referencia[arrayIndex]:
<div class="col-md-4" *ngFor="let referencia of referencias.rows">
<div class="card text-center">
<div class="card-header">
</div>
// Changed referencia.2 to referencia[2]
<div class="card-body">
{{referencia[2]}} // Should show 'AYALA'
</div>
</div>
</div>
In your ts file, I am assuming referencias is the parsed json response of the API. The below solution is to get all the rows.
<div class="col-md-4" *ngFor="let referencia of referencias['rows']">
<div class="card text-center">
<div class="card-header">
</div>
<div class="card-body" *ngFor="let rowData of referencia">
{{rowData}}
</div>
</div>
Hope this works for you.
Related
So currently, I'm displaying info from a dataset on my angular front end. For each entry in the dataset, I'm showing the name, address, rating, and image. I'm having some trouble displaying the image, however. The image is an external HTML link stored in 'html_attributions' which is stored within the object 'photos'.
Below is the code I currently have:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div *ngFor="let place of place_list | async">
<div class="card text-white bg-secondary mb-3">
<div class="card-header">
{{ place.name }}
</div>
<div class="card-body">
Address:
{{ place.formatted_address }}
</div>
<div class="card-footer">
Rating:
{{ place.rating }}
</div>
<img src = "{{place.photos}}">
</div>
</div>
</div>
</div>
</div>
I'm getting this error:
[object%20Object]:1 GET http://localhost:4200/[object%20Object] 404 (Not Found)
I've also tried {{place.html_attributions}}, which hasn't worked. I'd appreciate any help!
It should be:
// code above
<ng-container *ngFor="let photo of place?.photos">
<ng-container *ngFor="let htmlAttribution of photo?.html_attributions">
<img src="{{htmlAttribution}}">
</ng-container>
</ng-container>
// code below
I have following scenario:
app.component.html
<app-card>
This is the card body
</app-card>
card.component.html
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
</div>
</div>
Is there a simple way (like an interpolation) to render the text This is the card body into <div class="card-body">?
Use ng-content:
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<ng-content></ng-content>
</div>
</div>
in app.component.html file
try below code
<ng-content>
{{ write your property here }}
</ng-content>
I have a an array of objects:
collections = [
{name: 'one', productOne: 'image-url', productTwo: 'image-url'},
{name: 'two', productOne: 'image-url', productTwo: 'image-url'},
{name: 'three', productOne: 'image-url', productTwo: 'image-url'},
{name: 'four', productOne: 'image-url', productTwo: 'image-url'},
]
As you can see, each object contains an image url. Let's say I'm on productTwo's product page, hence I want to display productTwo's image. I additionally have an object (product), that contains the product's name, hence I know the product's name of the product page I'm on.
How do I display the correct image? You can find the issue's location by the three question marks.
I can't just use collection.productTwo, since the product page is supposed to be dynamic and should be adjusted to the current product's page.
This might sound confusing, but this approach might illustrate it a little more:
<img [src]="collection. + product.name" [alt]="collection.name" class="w-75 align-self-center">
Is this even possible?
Code:
<div class="container-fluid px-0 top-container" *ngIf="product" [style.position]="fixed && !collections ? 'fixed' : 'static'">
<div class="container-fluid bg-test justify-content-center min-vh-100 d-flex">
<h1 class="align-self-center">{{product.name}}</h1>
</div>
<div class="container-fluid justify-content-center d-flex collections" *ngIf="collections" [style.position]="fixed && collections ? 'fixed' : 'static'">
<div class="row align-self-center justify-content-around">
<div class="col-12 mb-5 text-center">
<h1>ALL COLLECTIONS</h1>
</div>
<div class="col-3" *ngFor="let collection of collections">
<div class="flex-row">
<div class="col-12 text-center">
<h4>{{collection.name}}</h4>
<p>- {{collection.desc}} -</p>
</div>
<div class="col-12 d-flex justify-content-center">
<img [src]="???" [alt]="collection.name" class="w-75 align-self-center">
</div>
</div>
</div>
</div>
</div>
</div>
You should be able to use:
<img [src]="collection[product.name]" [alt]="collection.name" class="w-75 align-self-center">
Hi could you try to write this:
<!-- For the image of productOne -->
<img [src]="collection?.productOne" [alt]="collection.name" class="w-75 align-self-center">
<!-- For the image of productTwo-->
<img [src]="collection?.productTwo" [alt]="collection.name" class="w-75 align-self-center">
Do not forget the operator ?. to be safe if the value is null.
I am working on moving chunks of code from being static code within my Views components into actual reusable Components.
I have moved what is called my TrainerCards code into a separate component and the cards used to display nicely as 3 to a row when they were hard coded in my TrainerIndex.vue, but now that they are being passed as a component, they only render as 1 per row, and I don't know why.
TrainerIndex.vue -
<div class="row">
<div class="col-md-4">
<TrainerCards v-for="trainer in orderBy(filterBy(trainers, searchText), sortAttribute, sortAscending)" :key="trainer.id" :trainer="trainer"/>
</div>
</div>
`
TrainerCards.vue -
<template>
<div class="card card-profile">
<div class="card-img-top">
<router-link v-bind:to="'/trainers/' + trainer.id">
<img class="img" :src="(trainer.avatar)" />
</router-link>
</div>
<div class="card-body">
<h4 class="card-title">{{trainer.full_name}}</h4>
<h6 class="card-category">{{trainer.location}}</h6>
<div class="card-footer">
<TrainerTags v-for="tag in trainer.tags" :key="tag.id" :tag="tag"/>
</div>
</div>
</div>
</template>
Any idea on how to get them to display properly?
Your col-md-4 class is what makes them fill 1/3 of the area, but that is now outside your component and not repeating. Move that div inside:
<div class="row">
<TrainerCards v-for="trainer in orderBy(filterBy(trainers, searchText), sortAttribute, sortAscending)" :key="trainer.id" :trainer="trainer"/>
</div>
<template>
<div class="col-md-4">
<div class="card card-profile">
<div class="card-img-top">
<router-link v-bind:to="'/trainers/' + trainer.id">
<img class="img" :src="(trainer.avatar)" />
</router-link>
</div>
<div class="card-body">
<h4 class="card-title">{{trainer.full_name}}</h4>
<h6 class="card-category">{{trainer.location}}</h6>
<div class="card-footer">
<TrainerTags v-for="tag in trainer.tags" :key="tag.id" :tag="tag"/>
</div>
</div>
</div>
</div>
</template>
I have this part of code:
{{#each cards}}
<div class="row-fluid">
<div class="card span4">
<p>{{content}}</p>
</div>
</div>
{{/each}}
and issue with setting it up to do something like this:
<div class="row-fluid">
<div class="card span4">
<p>{{content}}</p>
</div>
<div class="card span4">
<p>{{content}}</p>
</div>
<div class="card span4">
<p>{{content}}</p>
</div>
</div>
<div class="row-fluid">
<div class="card span4">
<p>{{content}}</p>
</div>
....
Anyone have any idea how to do so? (I know that I can render directly from Meteor.render() but I want to avoid it if possible)
Try out this split helper function which will split an array into sub-arrays, each with up to n elements:
if (Meteor.isClient) {
Handlebars.registerHelper("split", function(array, n) {
var groups = _.groupBy(array, function(element, index) {
return Math.floor(index/n);
});
return _.toArray(groups);
});
}
{{#each split cards 3}}
<div class="row-fluid">
{{#each this}}
<div class="card span4">
<p>{{content}}</p>
</div>
{{/each}}
</div>
{{/each}}
Note that your cards helper function must return an array for this to work, not a collection cursor.