Vue JS: how to get nested JSON data - javascript

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>

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: show data from JSON that has date of today only

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>

how to append comments in feed html use jquery

[
{
"id": 0,
"owner": {
"id": 0,
"email": "",
"username": "",
"profile": "",
"description": "",
"followers": 0,
"following": 0
},
"title": "",
"content": "",
"image_urls": [
"image_url1",
"image_url2",
"image_url3", ...
],
"liked_people": [
1,
2,
3, ...
],
"like_count": 0,
"comment_count": 0,
"view_count": 0,
"tag" : [
"tag1",
"tag2",
"tag3", ...
],
"created_at": "",
"comment_preview": [
{
"comment_id": 0,
"owner": {
"id": 0,
"email": "",
"username": "",
"profile": "",
"description": "",
"followers": 0,
"following": 0
},
"content": "",
"created_at": ""
}, ...
]
}, .....
]
This is api what feed and detail data.
I am developing SNS.
I get this data
and I want to create feed list what having 2 comments
but comments is may or may not be exist.
So how to append this comments to html?
Here is example code
Please add comments html is .feedComment.
const getFeed = (id) => {
$.ajax({
url: `BASE_URL/feed/postList`,
type: 'GET',
success: function(res) {
res.map(({id, owner, image_urls, title, content, tag, comment_preview}) => {
$('.feedArea').append(`
<div class='feed'>
<div class='feedHead'>
<div class='postmanProfile'>
<img src= "${owner.image}">
</div>
<div class='postmanName'>
<div class= 'postmanNameText'>${owner.username}</div>
</div>
</div>
<div class='disuniteLine'>
<hr>
</div>
<div class="feedThumbanil">
<div class="thumbanilImg">
<a href="detailFeed.html?id=${id}">
<img class="ImgArea" src="${image_urls}" alt="">
</a>
</div>
</div>
<div class="disuniteLine">
<hr>
</div>
<div class='feedLike_And_Comment'>
<div class='LikeIconImg like-${id}' feedId="${id}">
</div>
<div class="CommentIconImg">
<img class="commentImg" src="/picture/Icon/chat-box.png" alt="#">
</div>
<div class="viewMoreArea">
<img class="view_more" src="/picture/Icon/more.png">
</div>
</div>
<div class='title'>
<h2>
${title}
</h2>
</div>
<div class='content'>
<span>
${content}
</span>
</div>
<div class='tag'>
<h4>
${tag}
</h4>
</div>
<div class="feedComment">
// What should I do?
</div>
</div>
`);
})
},
error : function(err){
console.log(err);
},
async: false
})
}
I am time-limited life.
If I don't solve this, I might die.
Assuming your ajax works, you basically need this
<div class="feedComment">
${Object.keys(comment_preview[0].owner)
.map(key => (key+":"+comment_preview[0].owner[key]))
}
</div>
const res = [{ "id": 0, "owner": { "id": 0, "email": "", "username": "", "profile": "", "description": "", "followers": 0, "following": 0 }, "title": "", "content": "", "image_urls": [ "image_url1", "image_url2", "image_url3" ], "liked_people": [ 1, 2, 3 ], "like_count": 0, "comment_count": 0, "view_count": 0, "tag": [ "tag1", "tag2", "tag3" ], "created_at": "", "comment_preview": [{ "comment_id": 0, "owner": { "id": 0, "email": "bla#bla.com", "username": "User x ", "profile": "x profile", "description": "Desc", "followers": 0, "following": 0 }, "content": "Is this a feed comment?", "created_at": "" }] }]
function format(res) {
res.forEach(({
id,
owner,
image_urls,
title,
content,
tag,
comment_preview
}) => {
$('.feedArea').append(`
<div class='feed'>
<div class='feedHead'>
<div class='postmanProfile'>
<img src= "${owner.image}">
</div>
<div class='postmanName'>
<div class= 'postmanNameText'>${owner.username}</div>
</div
</div>
<div class='disuniteLine'>
<hr>
</div>
<div class="feedThumbanil">
<div class="thumbanilImg">
<a href="detailFeed.html?id=${id}">
<img class="ImgArea" src="${image_urls}" alt="">
</a>
</div>
</div>
<div class="disuniteLine">
<hr>
</div>
<div class='feedLike_And_Comment'>
<div class='LikeIconImg like-${id}' feedId="${id}">
</div>
<div class="CommentIconImg">
<img class="commentImg" src="/picture/Icon/chat-box.png" alt="#">
</div>
<div class="viewMoreArea">
<img class="view_more" src="/picture/Icon/more.png">
</div>
</div>
<div class='title'>
<h2>
${title}
</h2>
</div>
<div class='content'>
<span>
${content}
</span>
</div>
<div class='tag'>
<h4>
${tag}
</h4>
</div>
<div class="feedComment">
${Object.keys(comment_preview[0].owner)
.map(key => (key+":"+comment_preview[0].owner[key]))
}
</div>
`);
})
}
format(res)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feedArea"></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>

Categories