Angular material chips md-autocomplete not working on ng-repeat - javascript

I using Angular 1.5.5, and angular-material 1.1.0 here.
When I adding md-chips in ng-repeat loop it do not working, I got follow error:
angular.js:13550 TypeError: this.items.some is not a function
at e.appendChip (http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js:13:28477)....
md-template do not what that should (as return i go value from md-item-text, which is _id, but i need $chip.text);
it don't addind an item even if i changing md-item-text="item.text" (which is wrong but for test).
It do working well for a single item (with out ng-repeat).
<md-list-item ng-repeat="i in dialogueItems track by $index">
<md-chips ng-model="i.text" md-removable="true" md-enable-chip-edit="true" md-autocomplete-snap="true" md-require-match="true">
<md-autocomplete md-min-length="0" md-match-case-insensitive="true" md-selected-item="i.selectedItem" md-search-text="i.searchText" md-items="item in loadItems(i.searchText, i.tagId)" md-item-text="i.selectedItem._id" md-autoselect="true" md-no-cache="true"
placeholder="Words">
<span md-highlight-text="i.searchText">{{item.text}}</span>
</md-autocomplete>
<md-chip-template>
{{$chip.text}}
</md-chip-template>
</md-chips>
</md-list-item>
JS
$scope.dialogueItems = [{
tagId: 1,
text: [],
searchText: null,
selectedItem: null
}];
$scope.loadItems = function(query, tagId) {
return $http({
method: 'POST',
url: '/api/wordsapi/searchwords',
data: {
text: query,
tagId: tagId,
count: 10
}
}).then(function(d) {
return d.data.words;
});
};
And example of api result:
{
"words": [{
"text": "you",
"_id": "030423b3-99ed-42a2-bab7-7efd10a68cfa"
}, {
"text": "i",
"_id": "a833abe2-c602-4cd7-b765-5b14229ecc7d"
}, {
"text": "god",
"_id": "724766b6-c83c-4679-bf28-827ad1a516eb"
}, {
"text": "a",
"_id": "c2b7920b-7541-42f1-9b61-84a1d7c42930"
}, {
"text": "bless",
"_id": "6ea9b56f-b47b-4453-b97c-0b5ba4311992"
}, {
"text": "am",
"_id": "ab12f90d-9b40-4e33-af13-14e75fbb405a"
}, {
"text": "your",
"_id": "55910a38-4435-4db4-8498-6cddaf4b0059"
}, {
"text": "with",
"_id": "7c5a2627-777f-443e-9f58-83c62e4fae11"
}, {
"text": "are",
"_id": "befa650c-e894-477b-9e67-2f7fb24e40b5"
}, {
"text": "good",
"_id": "90ee8243-630f-4f91-9ecf-0a6469716e0d"
}],
"allCount": 1024
}

Related

How to sort an array of object depending on value of a subfield?

I have an array of objects called posts with a nested field answer. I have different conditions depending on which I need to sort my array.
Example array
let posts = [
{
"_id": "610b806ec6386ffa276b6d1c",
"post": "CDat the difference between Equity and News channel?",
"answers": [
{
"_id": "613724604dd4b6f39b344b4c",
"type": "text",
},
{
"_id": "6113c826a64da80fe48ab543",
"type": "video",
},
{
"_id": "6113c740a64da80fe48ab534",
"type": "audio",
},
{
"_id": "611135cf7497d70b6cc2c5e0",
"type": "video",
}
]
},
{
"_id": "611e14329ff0c343540ae10e",
"post": "How forex affects investment 6",
"answers": [
{
"_id": "61371b3a9bf14a39207fff8a",
"type": "video",
},
{
"_id": "613719369507fd12f93e3c62",
"type": "text",
},
{
"_id": "6135f28e29aeae3de45fc8c2",
"type": "text",
},
{
"_id": "6135f07c831da33c28fc1cf6",
"type": "audio",
},
{
"_id": "6135eb2d51a8830698d65cf3",
"type": "text",
},
]
}
]
What I need to do is...I want to sort all the answers with type "video" to start and after that type "audio" and then type "text" answers like so
let posts = [
{
"_id": "610b806ec6386ffa276b6d1c",
"post": "CDat the difference between Equity and News channel?",
"answers": [
{
"_id": "613724604dd4b6f39b344b4c",
"type": "video",
},
{
"_id": "6113c826a64da80fe48ab543",
"type": "video",
},
{
"_id": "6113c740a64da80fe48ab534",
"type": "audio",
},
{
"_id": "611135cf7497d70b6cc2c5e0",
"type": "text",
}
]
},
{
"_id": "611e14329ff0c343540ae10e",
"post": "How forex affects investment 6",
"answers": [
{
"_id": "61371b3a9bf14a39207fff8a",
"type": "video",
},
{
"_id": "613719369507fd12f93e3c62",
"type": "audio",
},
{
"_id": "6135f28e29aeae3de45fc8c2",
"type": "text",
},
{
"_id": "6135f07c831da33c28fc1cf6",
"type": "text",
},
{
"_id": "6135eb2d51a8830698d65cf3",
"type": "text",
},
]
}
]
Any help would be appreciated. Thank you
You will need to loop through each entry in your posts array and sort the answers array inside each entry using a custom function.
The return value of the custom function (ele1, ele2) => {} should return a value > 0 if ele1 should be placed after ele2, a value < 0 if ele1 should be placed before ele2, and a value = 0 if they are considered equal.
const getRanking = (ele) => {
if (ele.type == "video") return 1;
if (ele.type == "audio") return 2;
if (ele.type == "text") return 3;
};
posts = posts.map(post => {
post.answers.sort((ele1, ele2) => {
return getRanking(ele1) - getRanking(ele2);
});
return post;
});
You should use lodash for this. Check out _.orderBy() method. Here is a helpful link: https://www.geeksforgeeks.org/lodash-_-orderby-method/
You need to add custom compare function.
This is the simplest solution for your question
let posts = [
{
"_id": "610b806ec6386ffa276b6d1c",
"post": "CDat the difference between Equity and News channel?",
"answers": [
{
"_id": "613724604dd4b6f39b344b4c",
"type": "text",
},
{
"_id": "6113c826a64da80fe48ab543",
"type": "video",
},
{
"_id": "6113c740a64da80fe48ab534",
"type": "audio",
},
{
"_id": "611135cf7497d70b6cc2c5e0",
"type": "video",
}
]
},
{
"_id": "611e14329ff0c343540ae10e",
"post": "How forex affects investment 6",
"answers": [
{
"_id": "61371b3a9bf14a39207fff8a",
"type": "video",
},
{
"_id": "613719369507fd12f93e3c62",
"type": "text",
},
{
"_id": "6135f28e29aeae3de45fc8c2",
"type": "text",
},
{
"_id": "6135f07c831da33c28fc1cf6",
"type": "audio",
},
{
"_id": "6135eb2d51a8830698d65cf3",
"type": "text",
},
]
}
]
function type (t){
if(t==="video") return 1;
if(t==="audio") return 2;
if(t==="text")return 3;
}
function comparotor(a, b){
return type(a.type) - type(b.type)
}
posts.map(ele=>{
ele.answers.sort(comparotor);
})
console.log(posts);
You can easily achieve the result by using JS only by passing the comparator function to sort function
"video" => "v"
"audio" => "a"
"text" => "t"
You can use indexOf to check the first letter in a list of sorted letters(vat)
posts.map((o) =>o.answers.sort((a, b) => "vat".indexOf(a.type[0]) - "vat".indexOf(b.type[0])))
let posts = [
{
_id: "610b806ec6386ffa276b6d1c",
post: "CDat the difference between Equity and News channel?",
answers: [
{
_id: "613724604dd4b6f39b344b4c",
type: "text",
},
{
_id: "6113c826a64da80fe48ab543",
type: "video",
},
{
_id: "6113c740a64da80fe48ab534",
type: "audio",
},
{
_id: "611135cf7497d70b6cc2c5e0",
type: "video",
},
],
},
{
_id: "611e14329ff0c343540ae10e",
post: "How forex affects investment 6",
answers: [
{
_id: "61371b3a9bf14a39207fff8a",
type: "video",
},
{
_id: "613719369507fd12f93e3c62",
type: "text",
},
{
_id: "6135f28e29aeae3de45fc8c2",
type: "text",
},
{
_id: "6135f07c831da33c28fc1cf6",
type: "audio",
},
{
_id: "6135eb2d51a8830698d65cf3",
type: "text",
},
],
},
];
const result = posts.map((o) =>o.answers.sort((a, b) => "vat".indexOf(a.type[0]) - "vat".indexOf(b.type[0])));
console.log(result);

What is the best way to replace text in json?

So I have a bunch of JSON data and it contains a few fields. for example:
[{
"id": "XXX",
"version": 1,
"head": {
"text": "Main title",
"sub": {
"value": "next"
},
"place": "secondary"
},
"body": [{
"id": "XXX1",
"info": "three little birds",
"extended": {
"spl": {
"text": "song",
"type": {
"value": "a"
}
}
}
},
{
"id": "XXX2",
"info": [
"how are you?"
],
"extended": {
"spl": {
"text": "just",
"non-type": {
"value": "abc"
}
}
}
}
]
}]
what I'm trying to do is kind of conversion table (from a different JSON file)
if a field has the value 'a' replace it with 'some other text..' etc.
I have a service for the JSON pipeline, so I guess this is the right place to do the replacement.
so for this example, I have the JSON above and in my conversion table I have the following terms:
next: forward,
song: music,
a: option1,
just: from
etc...
What you are looking for can be achieved with templates. Replace the variable sections with some specific markers that you can find and replace from some external tools such as perl or sed.
For example, you could have a template.json with something like this:
...
"type": {
"value": "##VALUE##"
}
...
Then when you need the actual JSON, you could pass this though an intermediate script that replaces these templates with actual data.
cat template.json | sed -e 's/##VALUE##/my_value/' > target.json
Alternatively, with Perl:
cat template.json | perl -pi -e 's:\#\#VALUE\#\#:my_value:' > target.json
The best way is to parse it, replace the text in the object, and then stringify it.
The next best way is to use a regular expression.
In this example, I catch exceptions if path cannot be indexed, and use ['type'] instead of .type so it will scale to indexing 'non-type' if you wish.
const data = `[{
"id": "XXX",
"version": 1,
"head": {
"text": "Main title",
"sub": {
"value": "next"
},
"place": "secondary"
},
"body": [{
"id": "XXX1",
"info": "three little birds",
"extended": {
"spl": {
"text": "song",
"type": {
"value": "a"
}
}
}
},
{
"id": "XXX2",
"info": [
"how are you?"
],
"extended": {
"spl": {
"text": "just",
"non-type": {
"value": "abc"
}
}
}
}
]
}]
`
const o = JSON.parse(data)
o[0].body.forEach(b => {
try {
if (b.extended.spl['type'].value === 'a') {
b.extended.spl['type'].value = 'CHANGED'
}
} catch (e) {}
})
const newData = JSON.stringify(o, null, 2)
console.log(newData)
A string replace approach will work if you know and can rely on your source conforming, such as the only "value" is inside "type"
const data = `[{
"id": "XXX",
"version": 1,
"head": {
"text": "Main title",
"sub": {
"value": "next"
},
"place": "secondary"
},
"body": [{
"id": "XXX1",
"info": "three little birds",
"extended": {
"spl": {
"text": "song",
"type": {
"value": "a"
}
}
}
},
{
"id": "XXX2",
"info": [
"how are you?"
],
"extended": {
"spl": {
"text": "just",
"non-type": {
"value": "abc"
}
}
}
}
]
}]
`
const newData = data.replace(/"value": "a"/g, '"value": "NEWVALUE"')
console.log(newData)

How to display values in post { } in following example in vuejs?

{"status":true,"data":[{"agent_id":7042,"p_id":7039,"post":{"author":83,"created_on":"2017-10-07 14:28:36","sub_category":"Litigation Support","category":"Personal Investigation","budget":"5555","views":"0","status":"986","id":7039,"country":"India","state":"Kerala","quote":{"ref_id":"61","agent_id":7042,"p_id":7039,"created_on":"2017-10-09 10:41:15"}}},{"agent_id":7042,"p_id":7040,"post":{"author":83,"created_on":"2017-10-09 12:06:01","sub_category":"Pre-Matrimonial Investigation","category":"Personal Investigation","budget":"5555","views":"0","status":"984","id":7040,"country":"India","state":"Kerala","quote":{"ref_id":"61","agent_id":7042,"p_id":7039,"created_on":"2017-10-09 10:41:15"}}}]}
<div id="quotes">
<div v-for="post in data" class="mke_">
<card-component v-bind:id="post.p_id" v-bind:ins="post.category" v-bind:country="post.country" v-bind:state="post.state" v-bind:attachment_id="post.attachment_preview">
</card-component>
</div>
this is my vue js code to get the values, The values obtained is in the above format
quotes = new Vue({
'el' : '#quotes',
data : {
posts : [],
has_no_posts : true
},
mounted : function(){
var self = this;
$.ajax({
url : "url",
method : "POST",
dataType : "JSON",
data : {},
success : function(e){
if(e.status == true){
self.data = e.data;
if(e.data.length > 0)
self.has_no_posts = false;
}
}
});
}
});
This is my code to display the same which is getting error. So somebody please help me to didplay the same
You have to be more careful with your data.
First issue: you assign the result of your ajax query to self.data instead of self.posts.
Second issue: every "post" actually contains another "post" object with the actual post properties. So you need to use post.post.category to grab that.
See the below snippet. Note: I replaced your aja call with a setTimeout(0).
Finally, you should turn has_no_posts into a computed property that depends on self.posts.
var e = {
"status": true,
"data": [{
"agent_id": 7042,
"p_id": 7039,
"post": {
"author": 83,
"created_on": "2017-10-07 14:28:36",
"sub_category": "Litigation Support",
"category": "Personal Investigation",
"budget": "5555",
"views": "0",
"status": "986",
"id": 7039,
"country": "India",
"state": "Kerala",
"quote": {
"ref_id": "61",
"agent_id": 7042,
"p_id": 7039,
"created_on": "2017-10-09 10:41:15"
}
}
}, {
"agent_id": 7042,
"p_id": 7040,
"post": {
"author": 83,
"created_on": "2017-10-09 12:06:01",
"sub_category": "Pre-Matrimonial Investigation",
"category": "Personal Investigation",
"budget": "5555",
"views": "0",
"status": "984",
"id": 7040,
"country": "India",
"state": "Kerala",
"quote": {
"ref_id": "61",
"agent_id": 7042,
"p_id": 7039,
"created_on": "2017-10-09 10:41:15"
}
}
}]
};
new Vue({
el: '#quotes',
data: {
posts: [],
has_no_posts: true
},
mounted: function() {
var self = this;
setTimeout(function() {
self.posts = e.data;
self.has_no_posts = e.data.length > 0;
}, 0);
}
});
<script src="https://unpkg.com/vue"></script>
<div id="quotes">
<div v-for="post in posts" class="mke_">
<span v-bind:id="post.p_id">{{post.post.category}} - {{post.post.country}} - {{post.post.state}}</span>
</div>
</div>

Print all mongoDB data to string nodejs

I have a sample mongo document like this:
> db.chat.find().pretty()
{
"_id": ObjectId("555f1c0c7f4b820758b439b0"),
"user": "Guest1",
"friend": [{
"userfriend": "Guest2",
"noidung": [{
"method": "send",
"date": "2015-05-22T19:11:34+07:00",
"content": "allloooo"
}, {
"method": "receive",
"date": "2015-05-23T09:08:14+07:00",
"content": "yes man"
}]
}, {
"userfriend": "Guest3",
"noidung": [{
"method": "send",
"date": "2015-05-23T15:42:34+07:00",
"content": "foo 15:42"
}, {
"method": "receive",
"date": "2015-05-23T15:42:45+07:00",
"content": "bar 15:43"
}]
}]
}
And in my server.js, i use this code to print all data:
var chathistory = db.collection('chat');
chathistory.find().toArray(function (err, docs) {
console.log(docs)
});
And i get this log in my terminal:
[ { _id: 555f1c0c7f4b820758b439b0,
user: 'Guest1',
friend: [ [Object], [Object] ] } ]
'friend' field doesn't print all, its only [Object], so how can i get full data.
To print all the data, use the JSON.stringify() method
db.collection('chat').find().toArray(function(err, docs) {
console.log(JSON.stringify(docs));
});

Filtering in Angular JS by map keys

Consider the following JSON structure:
UPDATED:
[
{
"game0001": {
"-JfuVKIsUBH27DMJfWmL": {
"action": "STARTFIRSTHALF",
"team": "HOME"
},
"-JfuVLJGMgclLZ0Maduh": {
"action": "GOAL",
"team": "AWAY"
}
},
"$id": "events",
"$priority": null
},
{
"game0001": {
"gameRunning": false,
"startDate": "17/01/2015 17:27:42 PM"
},
"game0002": {
"gameRunning": true,
"startDate": "17/01/2015 19:45:59 PM"
},
"game0003": {
"gameRunning": false,
"scheduledDate": "17/01/2014 12:30:00 PM"
},
"$id": "games",
"$priority": null
}
]
How can I achieve filtering in AngularJS in HTML?
In a very basic way, what I'm trying to achieve is the following:
<div ng-repeat="game in games">
<div ng-repeat="event in events | filter:game">
{{event.name}} - {{game.name}}
</div>
</div>
I have 2 maps games and events which share the same keys, e.g (game0001, game0002)
While repeating the games, I would like to have a inner repeater for events and filter only the ones sharing the same key/id.
Here's a working plunkr, I made assumptions about the data you wanted to fetch:
http://plnkr.co/edit/DVwQaRZeZiagGEzY4lCy?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.games = {
"games": {
"game0001": {
"first": "a",
"second": "b"
},
"game0002": {
"first": "c",
"second": "d"
}
}
}
$scope.gamesKeys = Object.keys($scope.games['games']);
$scope.events = {
"events": {
"game0001": {
"event": {
"key": "a"
},
"event": {
"key": "b"
},
"event": {
"key": "c"
}
},
"game0002": {
"event": {
"key": "a"
},
"event": {
"key": "b"
},
"event": {
"key": "c"
}
}
}
}
$scope.eventsKeys = Object.keys($scope.events['events']);
});
The important part is the ng-repeat here:
<body ng-controller="MainCtrl">
<div ng-repeat="gameKey in gamesKeys">
<div ng-repeat="eventKey in eventsKeys">
event: {{events['events'][eventKey].event.key}} - game: {{games['games'][gameKey].first}}
</div>
</div>
</body>

Categories