I'm trying to set up a nested ng-repeat but can't quite figure out what's wrong. Nothing is printing in the nested ng-repeat
HTML:
<div ng-repeat="person in persons">
<p> {{ person.name }} </p>
<div ng-repeat="friend in person.mutual_friends">
{{ friend.name }}
</div>
</div>
JSON:
$scope.persons = [
{
name: 'First Person',
mutual_friends: [
{
name: 'Mutual Friend 1'
},
{
name: 'Mutual Friend 2'
},
]
},
{
name: 'Second Person',
mutual_friends: [
{
name: 'Mutual Friend 1'
},
{
name: 'Mutual Friend 2'
},
]
},
]
JSON was the issue.
Following JSFiddle code works :
https://jsfiddle.net/sushruthreddygade/hcpb229g/2/
JSON Structure:
[
{
"name": "First Person",
"mutual_friends": [
{
"name": "Mutual Friend 1"
},
{
"name": "Mutual Friend 2"
}
]
},
{
"name": "Second Person",
"mutual_friends": [
{
"name": "Mutual Friend 3"
},
{
"name": "Mutual Friend 4"
}
]
}
]
Related
I have a json object for chart like below:
{
"results": [
{
"dataSets": {
"One": {
"label": "testLabel",
"labels": "test",
"data": [
"10",
"58"
]
}
},
"chart": [
{
"key": "test",
"label": "chart-1",
"chartType": "bar",
"order": "1",
"dataSets": [
{
"style": "line",
"key": "One"
},
]
}
]
}
]
}
I want to get dataSets values like label, labels, data of “one” in chart’s dataSets by providing “one” as key.
Is it possible to do in javascript or vue?
Yes, it is possible. But you will need to make a series of Array.map() to achieve this.
const results = [{
dataSets: {
One: {
label: "testLabel",
labels: "test",
data: ["10", "58"]
}
},
chart: [{
key: "test",
label: "chart-1",
chartType: "bar",
order: "1",
dataSets: [{
style: "line",
key: "One"
}]
}]
}];
const modifiedResult = results.map(result => {
const outerDataSets = result.dataSets;
result.chart = result.chart.map(chart =>
chart.dataSets.map(innerDataSet => ({
...innerDataSet,
...outerDataSets[innerDataSet.key]
}))
);
return result;
});
console.log(modifiedResult);
Also if you are working with Vue, I think its best to put the modification of result on the computed so it will always try to add those dataSets additional data to the chart's dataSets.
Here a sample demo for implementation in Vue.
I have an 'users' collection. I store id's of users I follow in 'following' field.
{
"_id": {
"$oid": "5eab360253ec352e3cc791d6"
},
"email": "koray#gmail.com",
"password": "81dc9bdb52d04dc20036dbd8313ed055",
"following": ["5ea8879dfc286e1154a866cb", "5ea8879dfc286e1154a866c"],
"posts": [{
"head": "deneme header",
"body": "deneme body",
"is_private": false
}]
}
I want to get posts of users I follow as well as posts belogs to me but can't manage to pull it off.
You can use $lookup with custom pipeline and fetch documents from the same collection:
db.collection.aggregate([
{ $match: { _id: "5eab360253ec352e3cc791d6" } },
{
$lookup: {
from: "collection",
let: { following_users: "$following" },
pipeline: [
{ $match: { $expr: { $in: [ "$_id", "$$following_users" ] } } },
{ $project: { posts: 1 } }
],
as: "following_posts"
}
}
])
Mongo Playground
I'm rendering some checkboxes based on an array and using a data attribute as the v-model. I'm using Vue2.
However, I end up having all checkboxes checked for some reason, when the value of the v-model equals 1 (I guess it treats it as a bool instead of a number).
I tried v-model.number - without any luck. What am I doing wrong?
My template:
<div v-for="category in categories">
<input
type="checkbox"
v-model.number="item.category"
:id="'category_' + category.id"
:value="category.id"
#change="save"
/>
<label>{{ item.category }} : {{ category.id }}</label>
</div>
Model Data (item.category):
1
Categories:
[
{
"id": 2,
"name": "news Category 0"
},
{
"id": 7,
"name": "news Category 1"
},
{
"id": 12,
"name": "news Category 2"
},
{
"id": 17,
"name": "news Category 3"
},
{
"id": 22,
"name": "news Category 4"
},
{
"id": 27,
"name": "news Category 5"
},
// other values
]
Screenshot (Ive added item.category and category.id as label text to make it more clear):
As you are using Multiple checkboxes, you have to give an array in v-model, so your item.category has to be an array: [1].
See the working fiddle: https://jsfiddle.net/mimani/y36f3cbm/
var demo = new Vue({
el: '#demo',
data() {
return {
categories: [{
"id": 2,
"name": "news Category 0"
}, {
"id": 92,
"name": "news Category 8"
}, {
"id": 97,
"name": "news Category 9"
}],
item: {
category: [1]
}
};
}
})
Can anyone please help to solve my problems.
in angular js. I have below json and HTML file
test.json
{
"list": [
{
"id": 1,
"Name": "Name 1"
},
{
"id": 2,
"Name": "Name 2"
}
]
}
array.json
{
"list": [
{
"id": 1,
"time": [
{
"time1": "10.00am",
"time2": "10.10am",
"time3": "10.20am",
"time4": "10.30am"
}
]
}
I need output like below
id: 1
Name: Name1
time: 10.00am, 10.10am, 10.20am, 10.30am
id: 1
Name: Name1
time: 10.00am, 10.10am
Thanks in Advance
HTML
<div class="abc" ng-repeat="data in datas[0].list">
ID:{{data.id}}<br>
Name:{{data.Name}}<br>
Time:
<ANY ng-repeat="times in data.time[0]">
{{times}}
</ANY>
<hr>
</div>
Controller
$scope.datas=[{
"list": [
{
"id": 1,
"Name": "Name 1",
"time": [
{
"time1": "10.00am",
"time2": "10.10am",
"time3": "10.20am",
"time4": "10.30am"
}
]
},
{
"id": 2,
"Name": "Name 2",
"time": [
{
"time1": "10.00am",
"time2": "10.10am"
}
]
}
]
}];
You can use ng-repeat in your case something link below.
<span ng-repeat="list in myList">
Id : {{list.id}}<br/>
Name : {{list.Name}}<br/>
<span ng-repeat="tm in times | filter:{id: list.id}">
Time : <span ng-repeat="tim in tm.time">
<span ng-repeat="t in tim">
{{t}}{{$last ? '' : ', '}}
<span>
</span>
</span><br/>
</span>
Here is the working pen for you.
Codepen
I'm new to ionic and I want to be able to extend a simple json data set to include lists within an array:
My json file looks like this:
angular.module('starter.services', [])
/** A simple example service that returns some data. */
.factory('Bands', function() {
var bands = [
{"id": "0", name: 'U2', nationality: 'Irish', category: 'Rock', pic: "U2.jpg", url:"www.u2.com" },
{
"albums":
{"album"
[
{ "id": "101", name:"Songs Of Innocence", year:"2014", pic: "u2_soi_cover.jpg" },
{ "id": "102", name:"No Line On The Horizon", year:"2009", pic: "u2_nloth_cover.jpg" },
{ "id": "103", name:"How To Dismantle An Atomic Bomb", year:"2004", pic: "u2_htdaab_cover.jpg" },
]
},
},
{"id": "1", name: 'Silverchair', nationality: 'Australian', category: 'Grunge', pic: "silverchair.jpg", url:"www.silverchair.com/" },
{
"albums":
{"album"
[
{ "id": "102", name:"Frogstomp", year:"1995", pic: "sc_frogstomp_cover.jpg" },
]
},
},
];
return {
all: function() {
return bandss;
},
get: function(bandId) {
// Simple index lookup
return bands[bandId];
}
}
})
So I have been able to return the list of bands using a repeat and pass the band id to display individual band details.
I want to no extend the band page to it to return the album list details so I'm guessing it would be something like this, but I need some help understanding how to get the list out of the array for a specific band id.
<ion-content>
<div class="details">
<img src="pics/bands/{{band.pic }}" />
<h2>{{band.name}}</h2>
<p>{{band.nationality}}</p>
</div>
<ion-list>
<ion-item ng-repeat="album in albums" type="item-text-wrap" >
<h2>{{album.name}}</h2>
<p>{{album.year}}</p>
</ion-item>
</ion-list>
</ion-content>
Any help to point me in the right direction would be great.
You need to change the json format, move the "albums" into the "bands", like this:
[
{
"id": "0",
"name": "U2",
"nationality": "Irish",
"category": "Rock",
"pic": "U2.jpg",
"url": "www.u2.com",
"albums": [
{
"id"": "101",
"name": "SongsOfInnocence",
"year": "2014",
"pic": "u2_soi_cover.jpg"
}
]
}
]
Now in the ng-repeat of your view:
<ion-item ng-repeat="album in band.albums" type="item-text-wrap" >
<h2>{{album.name}}</h2>
<p>{{album.year}}</p>
</ion-item>