Once again, it's me!
Check out my latest project here
I am looking to retrieve data from a json file by inputting the necessary details and clicking on the button.
For instance, let's say we want to find job listings for developers in Istanbul. We fill out the required fields and hit the Find! button.
var app = new Vue({
el: "#app",
data: {
founded: [],
search: ""
},
created() {
fetch("job.json")
.then(res => {
return res.json();
})
.then(res => {
this.founded = res.items;
});
},
computed:{
filteredFounded: function(){
return this.founded.filter((items)=> {
return items.positionName.match(this.search)
});
}
}
}); <div class="header">
<h4>Find Job</h4>
</div>
<div id="app" class="nested">
<div class="card w-50">
<div class="search">
<input type="text" class="job" v-model="search" placeholder="Job...">
<select name="" class="city" id="">
<option value="Select">Select</option>
<option value="Istanbul">Istanbul</option>
<option value="Ankara">Ankara</option>
<option value="Izmir">Izmir</option>
<option value="Canakkale">Canakkale</option>
</select>
</div>
<div class="find">
<button>Find!</button>
</div>
<div class="card-body" v-for="item in filteredFounded">
<h5 class="card-title">{{item.companyName}}</h5>
<p class="card-text">{{item.positionName | to-uppercase}}</p>
<p class="card-text">{{item.cityName}}</p>
<p class="card-text">{{item.townName}}</p>
<p class="card-text">{{item.distance}}</p>
<a href="#" class=" btn-primary">Go!</a>
</div>
</div>
</div>
<script src="script.js"></script>