We Keep Coding

Vue method to list each object in an array of objects leads to errors

This is the dropdown component used to give a list of all grids in all pages. There are multiple pages and grids within those pages.
<v-dropdown
:items="pageGrids"
:item-text="gridNamesAndPages"
return-object
/>
gridNamesAndPages is under methods:
gridNamesAndPages: item => item.name + ' • (Page: ' + item.page_name.name + ')',
This is the method used to assign the empty array summaryGrids to all grids for this project:
getAllPageGrids() {
apiClientGet(
routes["pages.getAllPageGrids"],
null,
response => {
this.pageGrids.push(response.data);
}
);
},
The function in the controller:
public function getAllPageGrids()
{
return Auth::user()->client->grids()->get();
}
SummaryGrids are in this format. There could be multiple grids so whilst this only shows 3 there could be 100:
[
{
"id": 3,
"name": "AS",
"grid_cols": [
{
"id": 16,
"grid_id": 3,
"order": 1,
"header": "Col 1",
}
],
"page_name": {
"name": "Page 1"
}
},
{
"id": 4,
"name": "SF",
"grid_cols": [
{
"id": 21,
"grid_id": 4,
"header": "Name",
},
{
"id": 22,
"grid_id": 4,
"header": "Reference",
}
],
"page_name": {
"name": "Page 1"
}
},
{
"id": 5,
"name": "WE",
"grid_cols": [
{
"id": 24,
"grid_id": 5,
"header": "Name",
}
],
"page_name": {
"name": "Page 2"
}
}
]
However I continue to get this error:
I can't see anything wrong with the way the code is structured. Would anyone know if I've actually written it incorrectly?
(On request I've also included the custom v-dropdown component)
<template>
<v-select
:class="`text-field-${color || 'white'}`"
outlined dense
v-on="$listeners" v-bind="$attrs"
>
<slot>
<!-- -->
</slot>
</v-select>
</template>
<script>
export default {
props: {
color: {
type: String|null,
default: null
}
},
};
</script>

filter on the basis of a value in an array in where

I'm querying data, where the structure is something like this.
I have two models, FoodDrinks and Cuisines. They have many to many relation.
Now on the following query
{
"filter": {
"include": "cuisines"
}
}
I am getting the following results.
[
{
"id": 1,
"name": "Biryani",
"cuisines": [
{
"id": 1,
"name": "Mughlai"
},
{
"id": 2,
"name": "North Indian"
},
{
"id": 3,
"name": "Afghani"
}
]
},
{
"id": 2,
"name": "Chhole Bhature",
"cuisines": [
{
"id": 2,
"name": "North Indian"
}
]
},
{
"id": 3,
"name": "Amritsari Naan",
"cuisines": [
{
"id": 2,
"name": "North Indian"
},
{
"id": 6,
"name": "Punjabi"
},
]
}
]
Now I want only those food drinks which have cuisines from the following array.
let cuisinesIDs = ["1", "2"]
What will the following query for that?

I guess something like the below should work:
{
"filter": {
"include": "cuisines"
},
"where": {
"cuisines.id": {
"inq": cuisinesIDs
}
}
}

It might be the same answer as #Behrooz, but I would try:
{
"filter": {
"include": {
relation: 'cuisines',
scope: {
where: {
id: {inq: cuisinesIDs}
}
}
}
}
}

Merge and match objects that match AngularJS

Hello I would like to merge and match two json objects. I would like to do with the Angular way. Any help would be greatly appreciated. Thank you everyone. Here is an example:
// First json object
{
"UserID":"john.davis",
"edpi":null,
"UserApp":[
{
"Name":"name3",
"Link":"/Protect3.php"
},
{
"Name":"name5",
"Link":"/Admin/Launch.html"
},
{
"Name":"name2",
"Link":"aaap/defaultBH.php"
}
]
}
// Second json object
[
{
"color":"color1",
"icon": "content/images/icons/administrator.svg",
"Name": "name5"
},
{
"color":"color3",
"icon": "content/images/icons/administrator.svg",
"Name": "name3"
},
{
"color":"color2",
"icon": "content/images/icons/behavior.svg",
"Name": "name2"
}
]
Hoping to get this
[
{
"TokenName":"name3",
"TokenLink":"../Protect3.asp",
"color":{
"color":"color3",
"icon": "content/images/icons/administrator.svg",
"match": "name3"
}
},
{
"Name":"name5",
"Link":"/Admin/Launch.html",
"color":{
"color":"color1",
"icon": "content/images/icons/administrator.svg",
"match": "name5"
}
},
{
"Name":"name2",
"Link":"aaap/defaultBH.php"
"color":{
"color":"color2",
"icon": "content/images/icons/behavior.svg",
"match": "name2"
}
}
]

I figured it out. Here is the code below.
function mergeArraysOnProperty(array1, array2, property) {
array1.forEach(function(element1) {
array2.forEach(function(element2) {
if (element1[property] === element2[property]) {
for (var newProperty in element2) {
if (element2.hasOwnProperty(newProperty)) {
element1[newProperty] = element2[newProperty];
}
}
}
});
});
return array1;
};
$scope.newjson = mergeArraysOnProperty(userapp, color, "Name");
console.log($scope.newjson);

filter multiple checkbox angular

I am trying to filter my results on multiple checkboxes.
Here is my JSFIDDLE
How do i write dynamic ng-model for the checkboxes for the filter to take reflect?
function MainCtrl($scope) {
$scope.languages = [
{ name: 'persian', _id : 0 },
{ name: 'English', _id : 1 },
{ name: 'spanish', _id : 2 }
];
$scope.bu = [
{ name: 'A', _id : 1 },
{ name: 'B', _id : 2 },
{ name: 'C', _id : 3 },
{ name: 'D', _id : 4 },
{ name: 'E', _id : 5 }
];
$scope.array = [
{
"id": 910,
"language": {
"_id": "333",
"name": "Persian",
"abbreviation": "PE"
},
"business_unit": {
"_id": "2",
"name": "B"
}
},
{
"id": 909,
"language": {
"_id": "456",
"name": "English",
"abbreviation": "EN"
},
"business_unit": {
"_id": "3",
"name": "C"
}
},
{
"id": 908,
"language": {
"_id": "456",
"name": "Spanish",
"abbreviation": "SP"
},
"business_unit": {
"_id": "4",
"name": "D"
}
},
{
"id": 911,
"language": {
"_id": "343",
"name": "German",
"abbreviation": "GE"
},
"business_unit": {
"_id": "5",
"name": "E"
}
},
{
"id": 912,
"language": {
"_id": "696",
"name": "Russian",
"abbreviation": "RU"
},
"business_unit": {
"_id": "1",
"name": "A"
}
}]
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="MainCtrl">
<li ng-repeat="o in languages" ng-model="lang.language.name">
<input type="checkbox">
{{o.name}},
`</li>
<br><br><br>
<li ng-repeat="o in bu">
<input type="checkbox" ng-model="bu.business_unit.name">
{{o.name}},
`</li>
<br><br><br>
<div ng-repeat="arr in array filter : lang | filter : bu">
{{arr.language.name}} "and" {{arr.business_unit.name}}
</div>
<div>

You can use custom filter to achieve your goal:
custom fileter:
filter('myFilter', function() {
return function(items, search) {
var filterItems = {
search: search,
result: []
};
if (!search.needFilter) {
return items;
}
angular.forEach(items, function(value, key) {
if (this.search.language[value.language.name] === true || this.search.business_unit[value.business_unit.name] === true) {
this.result.push(value);
}
}, filterItems);
return filterItems.result;
};
})
HTML:
<p>Search by Language:</p>
<li ng-repeat="o in languages">
<input type="checkbox" ng-model="search.language[o.name]"> {{o.name}}
</li>
<p>Search by Unit:</p>
<li ng-repeat="o in bu">
<input type="checkbox" ng-model="search.business_unit[o.name]"> {{o.name}}
</li>
<p><b>Result:</b></p>
<div ng-repeat="arr in array | myFilter : search:false ">
{{arr.language.name}} "and" {{arr.business_unit.name}}
</div>
For more details see PLUNKER DEMO

angularjs append value into inside array

I am having array in below format. i am having issue to append the value inside each chapter array. i need to add field like 'checked:true'. I need to get the data in same format. Expectation is, need same format with added one field inside chapter array.
{
"Books": [
{
"label":"Book1",
"data": [
{
"bookId": 3561,
"bookName": "AJ200",
"chapters": [
{
"id": 3926,
"name": "red"
},
{
"id": 3927,
"name": "yellow"
},
{
"id": 3928,
"name": "black"
}
]
}
]
},
{
"label":"Book2",
"data":[
{
"bookId": 3561,
"bookName": "AJ200",
"chapters": [
{
"id": 3564,
"name": "blue"
},
{
"id": 3565,
"name": "orange"
}
]
}
]
}
]
}
after adding field chapters array looks like as below,
"chapters": [
{
"id": 3564,
"name": "blue",
"checked":true
},
{
"id": 3565,
"name": "orange"
"checked":true
}

This is a little verbose but works all the same!
var myObject =
{
"Books": [
{
"label":"Book1",
"data": [
{
"bookId": 3561,
"bookName": "AJ200",
"chapters": [
{
"id": 3926,
"name": "red"
},
{
"id": 3927,
"name": "yellow"
},
{
"id": 3928,
"name": "black"
}
]
}
]
},
{
"label":"Book2",
"data":[
{
"bookId": 3561,
"bookName": "AJ200",
"chapters": [
{
"id": 3564,
"name": "blue"
},
{
"id": 3565,
"name": "orange"
}
]
}
]
}
]
}
var books = myObject.Books;
for(var i=0; i<books.length; i++) {
var bookData = books[i].data;
for(var j=0;j<bookData.length;j++) {
var chapters = bookData[j].chapters;
for(var k=0;k<chapters.length;k++) {
chapters[k].checked = true;
}
}
}
console.log(JSON.stringify(books));