I have a vue component that displays data with loop like this :
<div class="courses-container" v-for="(value, index) in list_lowongan">
<div class="course">
<div class="course-info1">
<h2 class="lowongan1"> {{ value.title }}</h2>
<button id="pagiLowongan2" v-on:click="toggleBody(index)"><img src="images/panahkanan.png" class="panah1"></button>
<p class="descJob1">{{ value.body }}</p>
<p class="textDesc" v-if="value.showBody">Job Description : </p>
<ul class="a" id="bulletLowongan" v-if="value.showBody">
<li class="textDescKecil">{{ value.jobdesc1 }}</li>
<li class="textDescKecil">{{ value.jobdesc2 }}</li>
<li class="textDescKecil">{{ value.jobdesc3 }}</li>
<li class="textDescKecil">{{ value.jobdesc4 }}</li>
<li class="textDescKecil">{{ value.jobdesc5 }}</li>
</ul>
<p class="textDesc" v-if="value.showBody">Requirements : </p>
<ul class="a" id="bulletLowongan" v-if="value.showBody">
<li class="textDescKecil">{{ value.req1 }}</li>
<li class="textDescKecil">{{ value.req2 }}</li>
<li class="textDescKecil">{{ value.req3 }}</li>
<li class="textDescKecil">{{ value.req4 }}</li>
</ul>
<p class="textDesc" v-if="value.showBody">Work Type : {{ value.worktype }} </p>
<p class="Locationlow" v-if="value.showBody">Location : {{ value.location }} </p>
<p class="Locationlow" v-if="value.showBody">Employment Type : {{ value.employmenttype }} </p>
<router-link to="/apply" class="routesApply" v-if="value.showBody">Apply</router-link>
<hr class="garisJob1">
</div>
</div>
</div>
Script :
<script>
import axios from 'axios';
export default {
data() {
return {
'form': {
title: '',
body: '',
jobdesc1: '',
jobdesc2: '',
jobdesc3: '',
jobdesc4: '',
jobdesc5: '',
req1: '',
req2: '',
req3: '',
req4: '',
req5: '',
worktype: '',
location: '',
employmenttype: '',
},
list_lowongan: []
};
},
mounted() {
console.log('on mounted');
axios.get('post/list').then((response) => {
console.log(response.data)
this.list_lowongan = response.data
}).catch((error) => {
console.log(error)
});
},
methods: {
toggleBody(index) {
this.list_lowongan[index].showBody = !this.list_lowongan[index].showBody;
}
}
};
</script>
The problem is, this loop displays all the data in the table,
What should I do if I want to display only selected row from the table ?
For example :
The first row in the table is John Doe, and the second is John Doe2, by using this code, It will display both John Doe and John Doe2, but what should I do if I want to display the John Doe2 without the first one being displayed also?
Related
I wanted to read the data from the database and display it in the app.
I'm calling it like this :
<h2 class="lowongan1" v-for="value in list_lowongan"> {{ value.title }}</h2>
<p class="descJob1" v-for="value in list_lowongan">{{ value.body }}</p>
The script
export default {
data() {
return {
'form': {
title: '',
body: '',
},
list_lowongan: []
};
},
mounted() {
console.log('on mounted');
axios.get('post/list').then((response) => {
console.log(response.data)
this.list_lowongan = response.data
}).catch((error) => {
console.log(error)
});
},
The problem is, when I call it like that, It displays all the title in the database and the body in the database tables.
How can I make it so that it only display 1 title for each h2 class ?
Use a wrapping div to hold your content and then loop over the div like so:
<div v-for="value in list_lowongan">
<h2 class="lowongan1"> {{ value.title }}</h2>
<p class="descJob1">{{ value.body }}</p>
</div>
You have two for-loops independent of each other so they'll stack by themselves
You just need one for-loop to display a list of where each title and body are together
You can form it this way:
<div v-for="value in list_lowongan">
<h2>{{ value.title }}</h2>
<p>{{ value.body }}</p>
</div>
As per your requirement, No need to use multiple v-for loops for same data iteration. Instead you can achieve that by applying v-for in a wrapper element and then prints the object values inside that wrapper element.
Live Demo :
new Vue({
el: '#app',
data: {
list_lowongan: []
},
mounted() {
this.list_lowongan = [{
title: 'Title 1',
body: 'Body 1'
}, {
title: 'Title 2',
body: 'Body 2'
}, {
title: 'Title 3',
body: 'Body 3'
}]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(value, index) in list_lowongan" :key="index">
<h2>{{ value.title }}</h2>
<p>{{ value.body }}</p>
</div>
</div>
I have json format like that. How can I display hobbies without the word "all" in Angular/TypeScript?
{
"Name": "Mustermann1",
"Vorname": "Max1",
"maennlich": true,
"Hobbys": ["Reiten", "Golfen", "Lesen", "all"],
"Alter": 42,
"Kinder": [],
"Partner": null
}
{
"Name": "Mustermann2",
"Vorname": "Max2",
"maennlich": true,
"Hobbys": ["Reiten", "Golfen", "Lesen"],
"Alter": 42,
"Kinder": [],
"Partner": null
}
{
"Name": "Mustermann3",
"Vorname": "Max3",
"maennlich": true,
"Hobbys": ["Reiten", "Lesen", "all"],
"Alter": 42,
"Kinder": [],
"Partner": null
}
You can do it with two *ngFor loops and one *ngIf in your HTML, given that you have the data coming from your component. It might not be the ideal way to do it.
You loop through each person and each hobby to show, and filter out any hobby that is 'all'.
<ng-container *ngIf="hobby !== 'all'">
{{ hobby }}
</ng-container>
A quick setup:
<ng-container *ngFor="let person of dataObject">
<ul>
<li>
<h3>Name: {{ person.Vorname }}</h3>
<ng-container *ngFor="let hobby of person.Hobbys">
<ng-container *ngIf="hobby !== 'all'">
{{ hobby }}
</ng-container>
</ng-container>
</li>
</ul>
</ng-container>
And a working StackBlitz to validate your needs.
data = data.map((val) => {
val.Hobbys = val.Hobbys.filter((x) => x !== 'all');
return val;
});
<ng-container *ngFor="let item of items">
<ng-container *ngIf="item.Hobbys.indexOf('all') < 0">
<ul>
<li>
{{ item.Name }}
</li>
</ul>
</ng-container>
</ng-container>
stackblitz code link
I faced with a problem:
I have global variables with SVG icons and I want to render all icons inside template using for loop.
How to render a global variable as data inside for loop.
facebook: <svg viewBox="0 0 8 17" fill="none" xmlns="http://www.w3.org/2000/svg" .../>
{% set
list = [
{
link: 'https://facebook-link',
icon: 'facebook',
title: 'facebook group',
},
{
link: 'https://twitter-link',
icon: 'twitter',
title: 'twitter group',
}
]
%}
<ul class="socials">
{% for data in list %}
<li class="socials__item">
<a href="{{data.link}}"
title="{{data.title}}"
target="_blank"
rel="noopener noreferrer nofollow"
class="socials__link"
>
{{ data.icon | safe }}
</a>
</li>
{% endfor %}
</ul>
You can use a custom filter or global function to get the variable's value by its name
var nunjucks = require('nunjucks');
var env = nunjucks.configure();
env.addFilter('context', function(variable) {
return this.ctx[variable];
});
var html = env.renderString(
`{{ 'facebook' | context | safe }}`,
{facebook: 'FB'}
);
console.log(html);
I started working with angular recently and I'm trying to divide a list in two by their type and show it in two separated fields. My question is: can I do it by doing a for loop in the .ts file or there is an easier way?
HTML file:
<div class="ml-xs mr-xs my-flex-column">
<p>Interests:</p>
<ul style="list-style-type:disc;" *ngFor="let interests of item.profileInterest">
<li> {{ interests.name }} </li>
</ul>
</div>
<div class="ml-xs mr-xs my-flex-column">
<p>Behaviors:</p>
<ul style="list-style-type:disc;" *ngFor="let behaviors of item.profileInterest">
<li> {{ behaviors.name }} </li>
</ul>
</div>
.ts file:
public getCustomerProfile() {
this.blockUI.start("Loading");
this._service.getCustomerProfile(this.id)
.subscribe(
(data: RequestCustomerProfile[]) => {
if (data.length && data.length > 0) {
this.entityProfile = data;
} else {
this.entityProfile = [];
}
this.blockUI.stop();
},
error => {
console.log(error)
this.blockUI.stop();
}
);
}
One way to do this would be to treat the HTML file directly, just deal with it and check the "li" tag:
<div class="ml-xs mr-xs my-flex-column">
<p>Interest:</p>
<ul *ngFor="let interests of item.profileInterest">
<li *ngIf="interests.type == 'Interest'"> {{ interests.name }} </li>
</ul>
</div>
<div class="ml-xs mr-xs my-flex-column">
<p>Behavior:</p>
<ul *ngFor="let behaviors of item.profileInterest">
<li *ngIf="behaviors.type == 'Behavior'"> {{ behaviors.name }} </li>
</ul>
</div>
Hope this helps.
To do it in the .ts file you could do this:
get interests() {
return item.profileInterests.filter(interest => interest.type === 'Interest');
}
get behaviours() {
return item.profileInterests.filter(interest => interest.type === 'Behaviour');
}
(note that I have no idea of the structure of item.profileInterests, this is just a guess)
Then in the html you can use them like this:
<div class="ml-xs mr-xs my-flex-column">
<p>Interests:</p>
<ul style="list-style-type:disc;" *ngFor="let interest of interests">
<li> {{ interest.name }} </li>
</ul>
</div>
<div class="ml-xs mr-xs my-flex-column">
<p>Behaviors:</p>
<ul style="list-style-type:disc;" *ngFor="let behavior of behaviors">
<li> {{ behavior.name }} </li>
</ul>
</div>
This way when you want behaviours and interests elsewhere you can just use those getter variables (you don't need to call them with parentheses!).
I have set up page that shows different products. I've made a search box with a ng-model="query" and whenever I type my query the page gets automatically updated to the products that I have.
The problem is that whenever the query doesn't match something the page stays blank and this doesn't look good. Instead of a blank page I want the site to display a message saying along the lines of "No products found". How can I achieve this?
I've looked at other questions and their solutions but they didn't work.
Here is my code for the way the products are displayed. As you can see I've added a ng-show="products.length === 0 as some solutions suggested but the message never appears when I don't have a match.
<ul class="list-group">
<li ng-repeat="product in products | filter:query" class="list-group-item">
<h3><a id="productName" href="#/products/{{product.name}}">{{ product.name }}</a></h3>
<img id="mainImage" ng-src="{{ product.imgUrl }}" alt="{{ product.name}}">
<p id="description"> {{ product.description }}</p>
<p id="price"> Price: {{ product.price }} £</p>
<p ng-show="products.length === 0">Nothing found</p>
</li>
</ul>
Here is my controller code for the products page:
//Controller that fetches the available products to display them in the view
app.controller('productListController', function($scope, $http){
$http.get('products/products.json').success(function(data){
$scope.products = data.products;
});
});
Here is the code for the search box:
<div id="searchbox">
<div class="input-group">
<input type="text" class="form-control" ng-model="query" placeholder="Search for...">
<span style="width=1%;" class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div><!-- /input-group -->
</div><!-- searchbox -->
Take the <p ng-show="products.length === 0">Nothing found</p> outside the ng-repeat.
<li ng-repeat="product in filteredProducts = (products | filter:query)" class="list-group-item">
<h3><a id="productName" href="#/products/{{product.name}}">{{ product.name }}</a></h3>
<img id="mainImage" ng-src="{{ product.imgUrl }}" alt="{{ product.name}}">
<p id="description"> {{ product.description }}</p>
<p id="price"> Price: {{ product.price }} £</p>
</li>
<p ng-show="filteredProducts.length === 0">Nothing found</p>
It doesn't show because the ng-repeat is empty.
EDIT:
In order to be sure that the msg is displayed after products data is loaded:
$http.get('products/products.json').success(function(data){
$scope.products = (data.products && data.products.length > 0) ? data.products : [];
});
});
The answer #Daniel is not entirely correct.
As you ng-repeat to use a filter, this filter must also be applicable to the condition of ng-show.
Like this:
<ul>
<li ng-repeat="product in products | filter:query" class="list-group-item">
<h3><a id="productName" href="#/products/{{product.name}}">{{ product.name }}</a></h3>
<img id="mainImage" ng-src="{{ product.imgUrl }}" alt="{{ product.name}}">
<p id="description"> {{ product.description }}</p>
<p id="price"> Price: {{ product.price }} £</p>
</li>
</ul>
<p ng-show="products && (products| filter:query).length === 0">Nothing found</p>
Live example on jsfiddle.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
$scope.search = {};
$scope.arr = [];
$scope.isLoaded = false;
$scope.load = function() {
$scope.isLoaded = true;
$scope.arr = [{
x: 1
}, {
x: 2
}, {
x: 3
}, {
x: 11
}, {
x: 12
}];
};
$scope.clear = function() {
$scope.isLoaded = false;
$scope.arr = [];
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
<input ng-model="search.x">
<button ng-click="load()">
Load array
</button>
<button ng-click="clear()">
Clear array
</button>
<div ng-repeat="a in arrFiltered = (arr|filter:search)">
{{a.x}}
</div>
<div ng-show="isLoaded && arrFiltered.length==0">
not found
</div>
</div>
</div>