Develop Reference

How can I get a value of a variable by reference?

I have an array called tags which contain names for restauants. I want to use this in the for loop in the GMapMarker to go to retrieve data from the array that has the name.
let tags[] = {name: 'mcdonalds', id: '1'}, {name: 'burger king', id: '2'}, {name: 'subway', id: '3'}
mcdonalds: [{icon: 'mdi-mcdonalds', position: '2323, 4234'}, {icon: 'mdi-mcdonalds', position: '77654, 34554'} ]
burgerking: [{icon: 'mdi-burgerking', position: '756656, 43243'}, {icon: 'mdi-burgerking', position: '8744, 36774'} ]
subway: [{icon: 'mdi-subway', position: '2154, 65654'}, {icon: 'mdi-subway', position: '6453, 3562'} ]
<div v-for="tag in tags.name" :key="tag">
<GmapMarker
v-for="(restaurant, index) in **tag**"
:key="index"
:position="restaurant.position"
:icon="restaurant.icon"
#click="openMenu(restaurant)"
/>
</div>
I tried using ${{restaurant}}. But it seems to not retrieve data from the array.

Here's an example using your data. tags and restaurants are exposed to the template via computed properties.
NOTES:
I altered "burger king" to be "burgerking" so the match would work.
I changed the example template to use lists instead of GmapMarker so it could run in my environment.
<template>
<div>
<div v-for="tag in tags" :key="tag.id">
<ul>
<li
v-for="(restaurant, index) in restaurants[tag.name]"
:key="index"
:position="restaurant.position"
:icon="restaurant.icon"
#click="openMenu(restaurant)"
>
{{ restaurant.position }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
computed: {
tags() {
return [
{ name: 'mcdonalds', id: '1' },
{ name: 'burgerking', id: '2' },
{ name: 'subway', id: '3' },
];
},
restaurants() {
return {
mcdonalds: [
{ icon: 'mdi-mcdonalds', position: '2323, 4234' },
{ icon: 'mdi-mcdonalds', position: '77654, 34554' },
],
burgerking: [
{ icon: 'mdi-burgerking', position: '756656, 43243' },
{ icon: 'mdi-burgerking', position: '8744, 36774' },
],
subway: [
{ icon: 'mdi-subway', position: '2154, 65654' },
{ icon: 'mdi-subway', position: '6453, 3562' },
],
};
},
},
};
</script>
If your computed values are read from Vuex state, your script section may look something like:
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['tags', 'restaurants']),
},
};
</script>

how to get the text of anchor tag in jest

<a href={LinkMappingUtility.getMappedWebUiLink('/#/dashboard')}
data-id="0"
className="nav-menu-item"
autoFocus="true">
{menuItem({ linkTitle: translate('sbDashboard', currentLanguage), icon: 'swn-home-icon' })}
this is the anchor tag inside that i have menu item text and i want the text in enzyme
My Code is :
test('all menu items display the correct text', () => {
const allMenuItemText = [
{ linkTitle: 'Dashboard', icon: 'swn-home-icon' },
{ linkTitle: 'Alerts', icon: 'swn-alerts-icon' },
{ linkTitle: 'Contact Management', icon: 'swn-home-icon'},
{ linkTitle: 'Reporting', icon: 'swn-home-icon' },
{ linkTitle: 'Solutions', icon: 'swn-home-icon' },
{ linkTitle: 'Integrations', icon: 'swn-home-icon' },
{ linkTitle: 'Account Settings', icon: 'swn-home-icon'},
{ linkTitle: 'Support & Training', icon: 'swn-home-icon' }
];
wrapper.find('.nav-menu-item').forEach((node, index) => {
expect(node.text()).toEqual(allMenuItemText[index].linkTitle);
})
output : here i am getting the empty string in return

I'm guessing just a typo, you meant to use a class selector?
// tag selector
wrapper.find('nav-menu-item') ...
// class selector
wrapper.find('.nav-menu-item') ...

Have you tried selecting the link title - the anchor tag is difficult to select in the testing library - so if you select the link title you are clicking it may work
const anchorTag = wrapper.find("my-link-title");
expect(anchorTag).toHaveAttribute("href", "https://url-test-1#");

Child Data in Ionic side multi-level menu not displayed properly

as per attached picture, my data is not shown properly. How do i remove the "[{"title":..." Leaving just the "Stationery" in my side menu child data? When i clicked my parent item, it will drop down a child value. But instead of showing 'Stationery', it shows '[
{ title: 'Stationery' },
{ title: 'Paper & Pads' },
{ title: 'Technology' },
{ title: 'Ink & Toner' },...'
My menu.html as follows:
<div ng-repeat="item in items" ng-click="toggleGroup(items)" ng-controller="dropDownCtrl">
<ion-item>
{{item.title}}
<i class="icon" ng-class="isGroupShown(items) ? 'ion-arrow-up-b' : 'ion-arrow-down-b'"> </i>
</ion-item>
<ion-item ng-show="isGroupShown(items)" menu-close href="#/app/home">
{{item.children}}
</ion-item>
</div>
and my controllers.js:
starter.controller('dropDownCtrl', function( $scope ) {
$scope.items = [
{title: 'Products',
children: [
{ title: 'Stationery' },
{ title: 'Paper & Pads' },
{ title: 'Technology' },
{ title: 'Ink & Toner' },
{ title: 'Pantry' ,
children: [
{ title: 'Snacks, Beverages & Condiments' },
{ title: 'Tableware and Pantry Accessories' },
{ title: 'Cleaning Supplies' },
{ title: 'Medical Products' ,
children: [
{ title: 'First Aids ' },
]}
]}
]
},
{title: 'My Catalogs'},
{title: 'My RFQs'},
{title: 'My Orders'}
];

Its because you are referencing the whole object in children. Change {{item.children}} to {{item.children.title}}

Kendo Grid toolbar item not firing click function:

i have a few items in Kendo Grid Toolbar.
Everything works fine excepts last item called "test".
Click event not firing defined action.
Question is: How to solve that to fire another AngularJS function in the same Controller?
toolbar: [
{ template: kendo.template($("#preparedViewsToolbar").html()) },
{ name: "create" },
{ name: "save" },
{ name: "cancel" },
{
name: "test",
text: "testme",
click: function(e){
console.log("TEST");
}
}
]
Thanks for any help and advice.

This is because Kendo UI does not understand the click property on a toolbar item. It is not supported [reference]. Instead, you should define a template for the toolbar item, and in that template you can bind your click function.
JSBin example
<div id="grid"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="\#" onclick="return toolbar_click()">Command</a>
</script>
<script>
function toolbar_click() {
console.log("Toolbar command is clicked!");
return false;
}
$("#grid").kendoGrid({
toolbar: [
{ name: 'create' },
{ name: 'save' },
{ name: 'cancel' },
{ template: kendo.template($("#template").html()) }
],
columns: [
{ title: 'Name', field: "name" },
{ title: 'Age', field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>

var tableDIV = $("<div id='grid'> </div>");
$("body").append(tableDIV);
//set toolbar options and custom events.
var toolBar = [
{
name: "Add",
text: "Add new record",
events:{
click:function(e){
alert($(this).text());
}
}
}
];
//initialize grid with toolbar options.
tableDIV = tableDIV.kendoGrid({
toolbar: toolBar,
columns: [
{ title: 'Name', field: "name" },
{ title: 'Age', field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
}).data("kendoGrid");
//now bind events here.
tableDIV.element.find(".k-header.k-grid-toolbar > a").each(function(i){
console.log(i,toolBar);
$(this).bind((toolBar[i].events != undefined ? toolBar[i].events : null));
});

wdContextMenu get clicked element id

I use this context menu for a right click on table:tr elements:
http://www.downloadjavascripts.com/list/javasitelll99/Details.aspx
It works fine! and I defined a function for action handling.
var option = { width: 150, items: [
{ text: "Edit", icon: "public/images/sample-css/wi0126-16.gif", alias: "1-1", action: menuAction },
{ text: "Activate", icon: "public/images/sample-css/ac0036-16.gif", alias: "1-2", action: menuAction },
//this is normal menu item, menuAction will be called if this item is clicked on
{ text: "Deactivate", icon: "public/images/sample-css/ei0021-16.gif", alias: "1-3", action: menuAction },
//this is a split line
{ type: "splitLine" },
//this is a parent item, which has some sub-menu items
{ text: "Delete", icon: "public/images/sample-css/ei0021-16.gif", alias: "1-3", action: menuAction },
{ type: "splitLine" },
{ text: "Item Four", icon: "public/images/sample-css/wi0124-16.gif", alias: "1-5", action: menuAction },
{ text: "Group Three", icon: "public/images/sample-css/wi0062-16.gif", alias: "1-6", type: "group", width: 180, items: [
{ text: "Item One", icon: "public/images/sample-css/wi0096-16.gif", alias: "4-1", action: menuAction },
{ text: "Item Two", icon: "public/images/sample-css/wi0122-16.gif", alias: "4-2", action: menuAction }
]
}
]
};
function menuAction(){
alert(this.data.alias);
}
But, now I want to get the id of the clicked table:tr element.
How to get it?

var myElementId;
var option = { ...
onShow: applyrule,
onContextMenu: BeforeContextMenu
};
function menuAction() {
alert(myElementId);
}
function applyrule(menu) {
myElementId = this.id
}

Assuming that tableId is the id of your table this function should help you:
function getIdOfRowByIndex(tableId, rowIndex) {
return document.getElementById(tableId).rows[rowIndex].id;
}
If you have a tr element, then this function should help you:
function getIdOfRow(trElement) {
return trElement.id;
}
You can use jQuery to simplify your tasks, but these functions are technology-agnostic to help those who do not want/can use jQuery too.