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
Related
I am trying to create an educational website with django and in a specific section I want to show the courses available, so I used an owl-carousel for that. So far I have created two courses, and they are not being displayed properly. Basically the two courses are occupying five columns each one after another whereas there should only be two columns for the two courses in the carousel and when I will add more courses then there will be more columns added.
Here is how they are being displayed:
I don't want them this way, there should be two separate columns for two cards as there are two courses and I don't know how to fix it.
My code:
<section class="section courses" data-section="section4">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="section-heading">
<h2>Choose Your Course</h2>
</div>
</div>
<div class="owl-carousel owl-theme">
{% for course in courses %}
<div class="item">
<img src="{{ course.image }}" alt="Course #1">
<div class="down-content">
<h4>{{ course.title }}</h4>
<p>{{ course.description }}</p>
<div class="author-image">
<img src="{{ course.instructor_image }}" alt="Author 1">
{{ course.instructor }}
</div>
<br>
<div class="button">
Get Enrolled <i class="fa fa-angle-double-right"></i>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
Thanks in advance!
I'm developing an e-commerce with Django. My backend is fine, my problem is with the template. Currently, I want to display 4 products per row, and if there are 7 products, the other 3 must be aligned with the top one. I'm using bootstrap to do this, however, for some reason I don't know, it doesn't have 4 products on the same line, even with space. I'm using a container with 1200px.
home.html
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
{% for product in products %}
<div class="card mb-4 border rounded" style="width: 13.5rem;">
<a href="{{ product.get_absolute_url }}">
{%if product.image %}
<img class="img-produto" src='/media/{{product.image}}' class="card-img-top hover_img ">
{% else%}
<img class="img-produto" src="{% static '/img/not-found-product.jpg' %}" class="card-img-top hover_img">
{%endif%}
</a>
<div class="card-body">
<p class="card-title">{{product.name}}</p>
<p class="card-text"><i class='fas fa-dollar-sign' style="margin-right:2px"></i>{{product.price}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
Just remove width: 13.5rem; and add class col-4 in the div. Like,
<div class="col-4 card mb-4 border rounded">
<!-- your content goes here -->
</div>
I have been using Hugo to build up my website, however, I am having trouble making bootstrap cards of equal height even after using the h-100 class in the card div (as mentioned in a number of SO posts). I have copied my HTML code below.
I am guessing something in the css must be overriding the class.
Any advice would be appreciated.
<section id="blog-posts">
<div class="container-fluid ">
<div class="row text-center">
<div class="col-lg-12">
<h2 class="section-heading">Latest Blog Posts</h2>
<div class="section-underline"></div>
</div>
{{- range ( where site.RegularPages "Section" "blog" | first 3 ) }}
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 mb-5">
<div class="card h-100">
<div class="card-img img-fluid">
<!-- <div class="blog-cat-tag">Test</div> -->
{{ if isset .Params "featured_image" }}<img class="blog-image" src="{{ index .Params "featured_image"}}" alt="...">{{end}}
</div>
<div class="card-body">
<div class="project-title">{{ .Title }}</div>
<p class='card-text'>{{ .Summary }}</p>
Read More
<!-- <a class="viewmore" href="">Read More</a> -->
</div>
<div class="index-blog-post-details">
<div class="index-blog-post-icons">
<i class="far fa-calendar-alt"></i> {{- .Date.Format "January 2, 2006" -}}
<i class="far fa-clock"></i> {{ .ReadingTime }} min read
</div>
</div>
</div>
</div>
{{ end}}
</div>
</div>
</div>
I am trying to attach an image in a specific area in a card, but I don't know how to. I am sorry if it's a very silly question, I am a total beginner in terms of html. So can anyone please show me how to do it? It would have been really useful.
I am using Django. For example, If I want to add an image in that specific blue outlined area, what should I do?
My code
{% for fixture in fixtures %}
<div class="card bg-light">
<div class="card-header" style="color:red;" >
Featured
</div>
<div class="card-body">
<h5 class="card-title" style="color:black;">{{ fixture.home_team }} vs {{ fixture.away_team }}</h5>
<p class="card-text" style="color:black;">{{ fixture.description }}</p>
<form style="color:black;">
<h5><label for="watching">Watching?</label>
<input type="checkbox" id="watching" name="watching" value="watching">
</h5>
</form>
</div>
</div>
{% endfor %}
Give this a try
<div class="card bg-light">
<div class="card-header" style="color:red;" >
Featured
</div>
<div class="card-body">
<div class="row">
<div class="col col-md-6">
<h5 class="card-title" style="color:black;">{{ fixture.home_team }} vs {{ fixture.away_team }}</h5>
<p class="card-text" style="color:black;">{{ fixture.description }}</p>
<form style="color:black;">
<h5><label for="watching">Watching?</label>
<input type="checkbox" id="watching" name="watching" value="watching">
</h5>
</form>
</div>
<div class="col col-md-6">
<img src="https://lab.oliveiraweb.com.br/images-for-samples/owl.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
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.