Vue js: show data from JSON that has date of today only - javascript

in my vue JS project, i'm fetching data from JSON API as shown in below format body, and i wanted to show data of installments that has date == today only so it should give me city, buyer, paid_amount, remaining, amount, date, flat, and building of the flat that has installment amount registered in the same day of today
is it possible to do it?
"flats": [
{
"status": "sold",
"price": "550045",
"currency": "USD",
"end_date": "Not Set",
"buyer": "TEST",
"buyer_phone_number": "53687225",
"receipt_number_field": "0144542",
"size_unit": "M",
"_id": "61e6bccba5da17be7a90fe2e",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "NY",
"payment": {
"installment_payment": {
"installments": [
{
"amount": "52001",
"date": "2022-02-21",
"is_paid": true
},
{
"amount": "2500",
"date": "2022-02-13",
"is_paid": false
},
{
"amount": "5522",
"date": "2022-03-05",
"is_paid": false
},
{
"amount": "4555",
"date": "2022-03-02",
"is_paid": false
},
{
"amount": "4444",
"date": "2022-02-24",
"is_paid": false
}
],
"remaining": "498044"
},
"paid_amount": "52001"
},
"floor": "61e6bccba5da17be7a90fe2d",
"building": "61e6bccba5da17be7a90fe2c",
"size": "176.25",
"directions": " south",
"createdAt": "2022-01-18T13:12:53.212Z",
"updatedAt": "2022-02-21T15:27:36.774Z",
"__v": 0
},
code below in Vue js:
<b-card-body class="px-lg-5 py-lg-5" v-for="flat in Flats" :key="flat._id" v-show="flat.status=='sold'" >
<div class="text-center text-muted mb-4 border-dash">
<div v-for="find in flat.payment" :key="find._id" v-if="flat.payment.installment_payment && flat.payment.installment_payment.installments[0].date ==currentDate">
<h2>{{flat.buyer}} <i class="fas fa-user"></i> </h2>
<h3 class="mb-5">flat ({{flat.flat_number}})</h3> // i treid this but it's repeated more than one time
<div v-if="flat.payment.installment_payment">
<div v-for="(inst, index2) in find.installments" :key="index2">
<b-row>
<b-col>
<h4 :class="{ 'text-green': inst.is_paid == true, 'text-red': inst.is_paid == 'false'}">{{inst.amount}}$ </h4>
</b-col>
<b-col style="left:30px !important;">
<h4 :class="{ 'text-green': inst.is_paid == true, 'text-red': inst.is_paid == 'false'}">{{inst.date}}
</h4>
</b-col>
</b-row>
</div>
</div>
</div>
<!--- <p class="city" >{{flat.city}}</p>
<span v-for="(building,index) in Building" :key="index">
<p class="iconB" v-if="building._id.includes(flat.building)">{{building.building_number}} <i class="ni ni-building"></i> </p>
</span>
<h2>{{flat.buyer}} <i class="fas fa-user"></i> </h2>
<h3 class="mb-5">flat ({{flat.flat_number}})</h3>
<h4 v-for="(flatno,index1) in Floors" :key="index1+'ss'" v-if="flatno._id==flat.floor"> floor ({{ flatno.floor_number}}) </h4>
<h4>size ({{flat.size}})</h4>
<h4 class="mb-5">direction ({{flat.directions}})</h4>
<div v-if="flat.payment && flat.payment.installment_payment">
<h3 class="paidText">price: ${{flat.price}}</h3>
<h3 class="paidText mb-3">{{flat.payment.paid_amount}}$ : {{flat.updatedAt | formatDate}} paid</h3>
<h3 class="paidText mb-3"> remaining : ${{flat.payment.installment_payment.remaining}}</h3>
</div>-->
</div>
<validation-observer ref="formValidator">
</validation-observer>
</b-card-body>
i tried code above it gives me the amount with today's date correctly but i have problem with other data cuz it's repeated more than one time for each flat :|

Try this. It will only show if the date is the same. Otherwise you can filter your data before displaying it.
<div v-for="(inst, index2) in find.installments" :key="index2">
<b-row v-if="inst.date == new Date()">
<b-col>
<h4
:class="{
'text-green': inst.is_paid == true,
'text-red': inst.is_paid == 'false'
}"
>
{{ inst.amount }}$
</h4>
</b-col>
<b-col style="left:30px !important;">
<h4
:class="{
'text-green': inst.is_paid == true,
'text-red': inst.is_paid == 'false'
}"
>
{{ inst.date }}
</h4>
</b-col>
</b-row>
</div>

Related

Sort and Filter in vue

I am trying to sort the JSON data imported but its not working, I want to sort it to daily, weekly, and monthly on click in VUE.
I want it to be sorted on click for daily, weekly, and monthly. please anyone I would appreciate it all
`
This is the HTML PART
<template>
<div class="duration">
<p
v-for="(item, index) in filter When"
:key="index"
#click="when = item; active=index ">{{item}}</p>
</div>
</div>
<div
class="work box"
v-for="(period, index) in moments"
:item="period"
:key="index">
<div>
<div class="img">
<img class="icon" src="../assets/images/icon-work.svg" alt="" />
</div>
<div class="details xo">
<div class="header">
<h5 class="schedule">{{period.title}}</h5>
<span class="un">…</span>
</div>
<div class="moment">
<p class="hrs">{{period.timeframes.daily.current}}hrs</p>
<p class="when">Yesterday-<span class="days">{{period.timeframes.daily.previous}}days</span></p>
</div>
</div>
</template>
`
This is the JSON data
[
{
"title": "Work",
"timeframes": {
"daily": {
"current": 5,
"previous": 7
},
"weekly": {
"current": 32,
"previous": 36
},
"monthly": {
"current": 103,
"previous": 128
}
}
},
{
"title": "Play",
"timeframes": {
"daily": {
"current": 1,
"previous": 2
},
"weekly": {
"current": 10,
"previous": 8
},
"monthly": {
"current": 23,
"previous": 29
}
}
},
]

Vue JS: how to get nested JSON data

i have JSON like below, in payment .. i can't get cash_payment's paid_amount or installment_payment's paid_amount and date as well
{
"response": [
{
"status": "sold",
"price": "100000",
"currency": "USD",
"_id": "61c21fa6f650480b7630badf",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "dokj",
"payment": {
"cash_payment": {
"paid_amount": "100000",
"date": "2021-12-23"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.200Z",
"updatedAt": "2021-12-23T18:42:43.959Z",
"__v": 0
},
{
"status": "sold",
"price": "Not set",
"currency": "USD",
"_id": "61c21fa6f650480b7630bae0",
"flat_number": 2,
"description": "This is a newly created flat.",
"city": "Istanbul",
"payment": {
"installment_payment": {
"installments": [
{
"paid_amount": "5000",
"date": "2021-12-21"
},
{
"paid_amount": "4000",
"date": "2021-12-21"
}
],
"remaining": "1000"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.202Z",
"updatedAt": "2021-12-22T23:06:26.602Z",
"__v": 0
},}
code below:
<template>
<div>
<!-- Header -->
<div class="header bg-gradient-success py-7 py-lg-8 pt-lg-9">
<b-container>
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-5">
</b-col>
</b-row>
</div>
</b-container>
</div>
<!-- Page content -->
<b-container class="page-contet mt--8 pb-5">
<b-row class="justify-content-center">
<b-col lg="7" md="10">
<b-card no-body class="bg-white border-0 mb-0" style="background: linear-gradient(87deg, #172b4d 0, #1d2026 100%) !important ;">
<b-card-header class="bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-3">
<h2> details </h2>
</div>
</b-card-header>
<b-card-body class="px-lg-5 py-lg-5" v-if="roles ==='Admin'">
<div class="text-center text-muted mb-4">
</div>
<validation-observer ref="formValidator">
<b-form role="form">
<select class="status-info" v-model="City">
<option value="" selected disabled> choose city </option>
<option value="duhok" >doki</option>
>
</select>
<div v-if="City=='duhok'" v-for="(flat,index) in Flats" :key="index" v-show="flat.city=='doki'">
{{flat.city}} // i can get city easily
<pre style="color:white;" v-for="(find,indexT) in flat" :key="indexT"> {{find.paid_amount}} </pre> //didn't work
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import BuildingsService from "../../../services/ApiService"
export default {
name: 'light-table',
components: {
},
data() {
return {
buildingId: this.$route.params.id,
Flats: [],
City:"",
Floors: [],
check: true,
Building: [],
obj:[],
paymentObj:""
};
},
computed: {
roles() {
let roles = JSON.parse(sessionStorage.getItem('user')).role;
return roles;
},
},
mounted: function () {
BuildingsService.getAllFlats().then((response) => {
this.Flats = response.data.response;
});
BuildingsService.getBuildings().then((response) => {
this.Building = response.data.response;
console.log(this.Building, "buildings");
});
},
}
</script>
find.payment.cash_payment.paid_amount
find.payment.installment_payment.installments[0].paid_amount
find.payment.installment_payment.installments[1].paid_amount
You will need a method to detect the payment method and also sum the installments if it is an array.
Non tested example
getPaidAmount(flat) {
if (flat.payment.cash_payment){ return Number(payment.cash_payment.paid_amount) }
if (flat.payment.installment_payment){
const arr = flat.payment.installment_payment.installments.map(it=>Number(it.paid_amount))
const sum = arr.reduce(function (a, b) {return a + b;}, 0);
return sum
}
}
You can try like following snippet:
new Vue({
el: '#demo',
data() {
return {
response: [
{
"status": "sold",
"price": "100000",
"currency": "USD",
"_id": "61c21fa6f650480b7630badf",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "doki",
"payment": {
"cash_payment": {
"paid_amount": "100000",
"date": "2021-12-23"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.200Z",
"updatedAt": "2021-12-23T18:42:43.959Z",
"__v": 0
},
{
"status": "sold",
"price": "Not set",
"currency": "USD",
"_id": "61c21fa6f650480b7630bae0",
"flat_number": 2,
"description": "This is a newly created flat.",
"city": "Istanbul",
"payment": {
"installment_payment": {
"installments": [
{
"paid_amount": "5000",
"date": "2021-12-21"
},
{
"paid_amount": "4000",
"date": "2021-12-21"
}
],
"remaining": "1000"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.202Z",
"updatedAt": "2021-12-22T23:06:26.602Z",
"__v": 0
},
],
//buildingId: this.$route.params.id,
Flats: [],
City:"",
Floors: [],
check: true,
Building: [],
obj:[],
paymentObj:""
}
},
computed: {
roles() {
//let roles = JSON.parse(sessionStorage.getItem('user')).role;
//return roles;
},
cities() {
return this.response.map(r => r.city)
}
},
mounted: function () {
//BuildingsService.getAllFlats().then((response) => {
this.Flats = this.response;
//});
//BuildingsService.getBuildings().then((response) => {
this.Building = this.response;
//console.log(this.Building, "buildings");
//});
},
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
<b-container class="page-contet mt--8 pb-5">
<b-row class="justify-content-center">
<b-col lg="7" md="10">
<b-card no-body class="bg-white border-0 mb-0" style="background: linear-gradient(87deg, #172b4d 0, #1d2026 100%) !important ;">
<b-card-header class="bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-3">
<h2> details </h2>
</div>
</b-card-header>
<b-card-body class="px-lg-5 py-lg-5" >
<validation-observer ref="formValidator">
<b-form role="form">
<select class="status-info" v-model="City">
<option value="" selected disabled> choose city </option>
<option v-for="city in cities" >{{ city }}</option>
</select>
<div v-for="(flat,index) in Flats" :key="index" style="color:white;" v-show="City">
<div v-if="flat.payment.cash_payment && flat.city === City">
{{ flat.city }}
<pre style="color:white;" v-for="(find,indexT) in flat.payment" :key="indexT">
<span>Amount: {{ find.paid_amount }}</span> / <span>Date: {{ find.date }}</span>
</pre>
</div>
<div v-else v-if="flat.payment.installment_payment && flat.city === City">
{{ flat.city }}
<pre v-for="(find,indexT) in flat.payment.installment_payment?.installments" :key="indexT">
<span>Amount: {{ find.paid_amount }}</span> / <span>Date: {{ find.date }}</span>
</pre>
</div>
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
</b-container>
</div>

How to search text from json and display in html?

I am listing project name from json result and display in side bar. When click on side bar listed any of project name it shows the details of it. Now i have search box to search projects and display project details and get selected project name in side bar.
here is the search box code :
<input class="form-control form-control-dark w-100" type="text" id="text" placeholder="Search" aria-label="Search">
here is the result of json:
"projects": [
{
"instances": null,
"name": "decodingideas",
"projectid": "decodingideas-147616",
"projectnumber": 334691107943,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
{
"instances": null,
"name": "pupil-workers",
"projectid": "pupil-workers",
"projectnumber": 455648594684,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
}
Here i will be searching projectid, name or instance, etc.
here is the code used in html:
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div id="projectlist" class="sidebar-sticky">
<ul class="nav flex-column nav-pills">
{{range .Projects}}
<li class="nav-item" >
<a name="{{.ProjectID}}" class="nav-link" href="#">
<img class="img-fluid" style="width:8%"
src="static/image/generic_gcp.png">
{{.Name}}
<div>
<small>
ProjectId: {{.ProjectID}}
</small>
</div>
</a>
</li>
{{end}}
</ul>
<!-- Might need this seperator
<h6 class="sidebar-heading d-flex justify-content-between align-items-
center px-3 mt-4 mb-1 text-muted">
<span>Savings Reports</span>
</h6>
-->
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
{{range .Projects}}
<div id={{.ProjectID}} class="d-none justify-content-between flex-wrap
flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
<h1 class="h2">Project:{{.Name}}</h1>
How can list search and display project details and get selected in side bar of that project name.
Here is auto complete from Jquery ui:
$( function() {
var projects= [
{
"instances": null,
"name": "decodingideas",
"projectid": "decodingideas-147616",
"projectnumber": 334691107943,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
{
"instances": null,
"name": "pupil-workers",
"projectid": "pupil-workers",
"projectnumber": 455648594684,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
}
];
$( "#projects" ).autocomplete({
source: function (request, response) {
response($.map(projects, function (value, key) {
return {
label: value.name+" "+ value.projectid,
value: value.projectid
}
}));
},
select: function(event, ui) {
var res= $('#projects').val(ui.item.projectid);
}
});
} );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
SEarch: <input id="projects">
If you want source with ajax:
var url="";//your url to json file
source: function(request,response)
{
$.get(url, function(data)
{
obj = JSON.parse(data); //parse the data in JSON (if not already)
response($.map(obj, function(value, key)
{
return {
label: value.name+" "+ value.projectid,
value: value.projectid
}
}));
}
}

How do i list items(render) from a nested JSON response Angular.js

my home controller returns this, this is what i see on.
This lists the authors i have and the rating star, i wanted to include the titles of each authors. and i tried this but didn't work for me, what am i missing??
[
{
"_id": "58dd21c3cb77090b930b6063",
"bookAuthor": "George Orwell",
"titles": [
{
"title": "Animal Farm",
"_id": "58dd3f2701cc081056135dae",
"reviews": [
{
"author": "Lisa",
"rating": 4,
"reviewText": "this is a review",
"_id": "58dd8e13876c0f16b17cd7dc",
"createdOn": "2017-03-30T23:00:35.662Z"
}
],
"favouredBy": [
"bb, aa, cc"
]
},
{
"title": "1984",
"_id": "58dd42a59f12f110d1756f08",
"reviews": [
{
"author": "jessy",
"rating": 5,
"reviewText": "REVIEW FOR SECOND TITLE",
"_id": "58dd8ef46d4aaa16e4545c76",
"createdOn": "2017-03-30T23:04:20.609Z"
}
],
"favouredBy": [
"all"
]
}
]
}
]
and there is my home.view.html
<navigation></navigation>
<div class="container">
<page-header content="vm.pageHeader"></page-header>
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="error">{{ vm.message }}</div>
<div class="row list-group">
<div class="col-xs-12 list-group-item" ng-repeat="book in vm.data.books | filter : textFilter">
<h4>
<small class="rating-stars" rating-stars rating="book.rating"></small>
</h4>
<p class="Author">{{ book.bookAuthor }}</p>
</div>
<div class="col-xs-12 list-group-item2" ng-repeat="book in vm.data.books | filter : textFilter">
<h4>
{ book.titles.title }}
</h4>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<p class="lead">{{ vm.sidebar.content }}</p>
</div>
</div>
<footer-generic></footer-generic>
</div>
Yous should use <div ng-app='myApp' ng-controller='myController as vm'> also you should place the nested loop inside the first div and then access do a ng-repeat for the child item.
<div ng-repeat="eachbook in book.titles">
DEMO
var myApp=angular.module('myApp',[])
myApp.controller('myController',function(){
this.data={};
this.data.books= [
{
"_id": "58dd21c3cb77090b930b6063",
"bookAuthor": "George Orwell",
"titles": [
{
"title": "Animal Farm",
"_id": "58dd3f2701cc081056135dae",
"reviews": [
{
"author": "Lisa",
"rating": 4,
"reviewText": "this is a review",
"_id": "58dd8e13876c0f16b17cd7dc",
"createdOn": "2017-03-30T23:00:35.662Z"
}
],
"favouredBy": [
"bb, aa, cc"
]
},
{
"title": "1984",
"_id": "58dd42a59f12f110d1756f08",
"reviews": [
{
"author": "jessy",
"rating": 5,
"reviewText": "REVIEW FOR SECOND TITLE",
"_id": "58dd8ef46d4aaa16e4545c76",
"createdOn": "2017-03-30T23:04:20.609Z"
}
],
"favouredBy": [
"all"
]
}
]
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myController as vm'>
<div class="row">
<div class="row list-group">
<div class="col-xs-12 list-group-item" ng-repeat="book in vm.data.books | filter : textFilter">
<h4>
<small class="rating-stars" rating-stars rating="book.rating"></small> {{book.bookAuthor}}
</h4>
<div ng-repeat="eachbook in book.titles">
<ul>
<li>
{{eachbook.title}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

search filter from multiple select in angularjs

What I'm trying to achieve here is getting filter results from a json file using two dropdown. Actually I have two requirements.
Get filtered results on a click of a search button.
update the same scope and not creating a new scope for search results.(I have created a new scope in my code)
I'll explain a bit more here I have two select options one is for subjects and other is for grades. I want the results based on the selected options. Eg: If I select Math I should get 2 results as per the json. Also I'm not able to understand how do I achieve the update the view.
Here is code
JSON:
{
"data": [
{
"id": 1,
"image": "images/img01.jpg",
"title": "Addition and subtraction",
"subject": "Math",
"grade": 2,
"noOfVideos": 1,
"noOfDocuments": 1,
"noOfQuestions": 2,
"date": "21 Dec 2015"
},
{
"id": 2,
"image": "images/img02.jpg",
"title": "Addition",
"subject": "Math",
"grade": 2,
"noOfVideos": 1,
"noOfDocuments": 0,
"noOfQuestions": 1,
"date": "09 April 2015"
},
{
"id": 3,
"image": "images/img03.jpg",
"title": "Learn English",
"subject": "English",
"grade": 1,
"noOfVideos": 0,
"noOfDocuments": 1,
"noOfQuestions": 1,
"date": "28 Oct 2015"
},
{
"id": 4,
"image": "images/img04.jpg",
"title": "Lorem Ipsum",
"subject": "Science",
"grade": 1,
"noOfVideos": 1,
"noOfDocuments": 1,
"noOfQuestions": 2,
"date": "11 Jan 2016"
},
{
"id": 5,
"image": "images/img05.jpg",
"title": "Computers magic",
"subject": "Computers",
"grade": 2,
"noOfVideos": 1,
"noOfDocuments": 1,
"noOfQuestions": 1,
"date": "01 June 2015"
}
]
}
HTML
<form ng-submit="search()">
<select class="form-control" ng-model="subject" ng-options="subj.subject for subj in listData">
<option value="">All Subjects</option>
</select>
<select class="form-control" ng-model="grade" ng-options="grd.grade for grd in listData track by grd.id">
<option value="">All Grades</option>
</select>
<!-- <input type="submit"> -->
<input type="submit" value="search">
</form>
<!-- <div class="item" id="item{{ item }}" ng-repeat="item in listData" draggable item="item">{{ item }}</div> -->
<div class="panel panel-default" ng-repeat="data in searchResults">
<div class="panel-body">
<div class="row">
<div class="col-lg-2">
<img ng-show="data.image" src="{{data.image}}" width="120" height="120" />
</div>
<div class="col-lg-10 data-content">
<h1 id="item{{ item }}" class="item" draggable item="item">{{ data.title }}</h1>
<p>{{ data.subject }} Grade: {{ data.grade }}</p>
<div class="meta-data">
<div class="data-details">
{{ data.noOfVideos }} <i class="glyphicon glyphicon-facetime-video"></i>
{{ data.noOfVideos }} <i class="glyphicon glyphicon-list-alt"></i>
{{ data.noOfVideos }} Q
</div>
<div class="date">{{ data.date }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default" ng-hide="searchResults" ng-repeat="list in listData">
<div class="panel-body">
<div class="row">
<div class="col-lg-2">
<img ng-show="list.image" src="{{list.image}}" width="120" height="120" />
</div>
<div class="col-lg-10 data-content">
<h1 id="item{{ item }}" class="item" draggable item="item">{{ list.title }}</h1>
<p>{{ list.subject }} Grade: {{ list.grade }}</p>
<div class="meta-data">
<div class="data-details">
{{ list.noOfVideos }} <i class="glyphicon glyphicon-facetime-video"></i>
{{ list.noOfVideos }} <i class="glyphicon glyphicon-list-alt"></i>
{{ list.noOfVideos }} Q
</div>
<div class="date">{{ list.date }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="error" ng-show="error">{{ error }}</div>
JS
var app = angular.module('zayaApp', []);
app.factory('mainInfo', function($http) {
return $http.get('data.json');
})
app.controller('listCtrl', ['$scope', '$http', 'mainInfo', function($scope, $http, mainInfo){
mainInfo.then(function successCallback(response) {
$scope.listData = response.data.data;
}, function errorCallback(response) {
$scope.error = response.statusText;
});
$scope.search = function() {
var searchResults = {
subject: $scope.subject,
grade: $scope.grade
}
$scope.searchResults = searchResults;
}
}]);
Also if you see the json the grades are repeated so, I wanted to know when populating the select options can I just prevent it from repeating? Only 1 & 2 shows up? I'm able to achieve the results with one dropdown select option but not able to chain it. I would have created a plunkr but it doesn't seems to work with the json file.
Demo Link
In Angularjs Two way Binding so no need button click. After select dropdown the data will show based on filter...

Categories