We Keep Coding

Map an nested arrays and return matched ones

I know, there are already tons of same questions i saw some of them, but couldn't get full answer.
So, I have an array something like this (simplified for demonstration):
// links.js
const links = [
{
name: 'Page 1',
path: '/page-1'
},
{
name: 'Page-2',
subpages:[
{ name: 'Page (2-1)', path: '/page-2-1' },
{ name: 'Page (2-2)', path: '/page-2-2' }
]
},
{
name: 'Page 3',
path: '/page-3'
},
{
name: 'Page 4',
subpages:[
{ name: 'Page (4-1)', path: '/page-4-1' },
{ name: 'Page (4-2)', path: '/page-4-2' },
{ name: 'Page (4-3)', path: '/page-4-3' }
]
},
...
]
export default links
The above object is menu-links data, i render them on the screen for nagivating between pages and subpages is dropdown. They have either path or subpages, not both and there might be more nested.
There are 2 tasks i want help with.
First:
Every page of my site has a title and most of them is same as its name property shown above.
So, i have a function rendered on every page that returns the pathname of the current route, so what i want is to map through the links and get the name of matched path.
For example, if i give /page-4-1, i wanna get the name property of the matched path, So that is name: Page 4
Second
This time, it is something like a breadcrumb, If i give ['/page-1', '/page-2-1', '/page-4-2'], i wanna get:
[
{
name: 'Page 1',
path: '/page-1'
},
{
name: 'Page (2-1)',
path: '/page-2-1'
},
{
name: 'Page (4-2)',
path: '/page-4-2'
},
]
There will be cases where there might not be a matched result, in that case i would like to insert {name: document.body.title, path: null}
I tried
i'm using Nextjs
import { useRouter } from 'next/router'
import links from 'links.js'
const router = useRouter()
const splitted = router.asPath
.split('/')
.filter(
(sp) =>
sp !== ''
)
cost ready = []
for (let sp = 0; sp < splitted.length; sp++) {
for (let ln = 0; ln < links.length; ln++) {
if (links[ln].path) {
if (links[ln].path === '/' + splitted[sp]) {
ready.push(links[ln])
}
} else {
for (let sb = 0; sb < links[ln].sublinks.length; sb++) {
if (links[ln].sublinks[sb].path === '/' + splitted[sp]) {
ready.push(links[ln].sublinks[sb])
}
}
}
}
}
This is partly working but is messy, there should be a better ways with map, filter and find but i couldn't succeed with my tries on them.
Thank you in advance for your help!
EDIT:
Oops! my question had a big mistake, the links object only contains path key, not conditional path and link.

const links = [
{
name: 'Page 1',
path: '/page-1'
},
{
name: 'Page-2',
subpages:[
{ name: 'Page (2-1)', path: '/page-2-1' },
{ name: 'Page (2-2)', path: '/page-2-2' }
]
},
{
name: 'Page 3',
path: '/page-3'
},
{
name: 'Page 4',
subpages:[
{ name: 'Page (4-1)', path: '/page-4-1' },
{ name: 'Page (4-2)', path: '/page-4-2' },
{ name: 'Page (4-3)', path: '/page-4-3' }
]
},
];
const findPathObj = (path,links) => {
let result = null;
for(const item of links){
if(item.path == path) return item;
if(item.subpages) result = findPathObj(path, item.subpages)
if(result) break;
}
return result;
}
const findPageName = (path,links) => findPathObj(path,links)?.name;
const findBreadcrumb = (pathes, links) => pathes.map(path => findPathObj(path,links) || {name: document.title, path: null});
console.log(findPageName('/page-4-1', links));
console.log(findBreadcrumb(['/page-1', '/page-2-1', '/page-4-2'],links))

For your first question try the following
const links = [
{
name: "Page 1",
path: "/page-1",
},
{
name: "Page-2",
subpages: [
{ name: "Page (2-1)", path: "/page-2-1" },
{ name: "Page (2-2)", path: "/page-2-2" },
],
},
{
name: "Page 3",
link: "/page-3",
},
{
name: "Page 4",
subpages: [
{ name: "Page (4-1)", link: "/page-4-1" },
{ name: "Page (4-2)", link: "/page-4-2" },
{ name: "Page (4-3)", link: "/page-4-3" },
],
},
];
// Find out function
// Level must 0 at beginning
function findout(pages, search, level = 0) {
for (const page of pages) {
if (page.link === search || page.path === search) {
if (level === 0) {
return page.name;
}
return true;
}
if (Array.isArray(page.subpages)) {
if (findout(page.subpages, search, level + 1)) {
if (level === 0) {
return page.name;
}
return true;
}
}
}
return false;
}
console.log(findout(links, "/page-4-3"))
The second question I suggest this
const links = [
{
name: "Page 1",
path: "/page-1",
},
{
name: "Page-2",
subpages: [
{ name: "Page (2-1)", path: "/page-2-1" },
{ name: "Page (2-2)", path: "/page-2-2" },
],
},
{
name: "Page 3",
link: "/page-3",
},
{
name: "Page 4",
subpages: [
{ name: "Page (4-1)", link: "/page-4-1" },
{ name: "Page (4-2)", link: "/page-4-2" },
{ name: "Page (4-3)", link: "/page-4-3" },
],
},
];
function findout2(pages, search, result = []) {
for (const page of pages) {
if (typeof page.link === "string" && search.includes(page.link)) {
result.push({ name: page.name, link: page.link });
} else if (typeof page.path === "string" && search.includes(page.path)) {
result.push({ name: page.name, path: page.path });
}
if (Array.isArray(page.subpages)){
findout2(page.subpages, search, result)
}
}
return result
}
console.log(findout2(links, ['/page-1', '/page-2-1', '/page-4-2']))

JS filter some part from an array of objects

I've this array.
const routes = [
{
path:'/dashboard',
text: "Dashboard"
},
{
path:'/disputes',
text: "Disputes"
},
{
children: [
{
text: "Create Suburb",
path: "/create-suburb"
},
{
text: "View and Update Suburb",
path: "/view-suburb"
}
]
},
{
children: [
{
text: "Create user",
path: "/create-user"
},
{
text: "View and Update users",
path: "/view-users"
}
]
}
]
and I've this array
const permissions = ['/dashboard','/view-suburb'];
What I want is filter out objects from the array where there is not in the permissions array.
My expected out put is this
const routes = [
{
path:'/dashboard',
text: "Dashboard"
},
{
children: [
{
text: "View and Update Suburb",
path: "/view-suburb"
}
]
},
]
Note that two objects are completely removed and some part of the third object also removed. How do I achieve this using JS?
What I've done upto now is this
items.filter(e=>{
if(e.path){
return permissions.includes(e.path)
}else{
}
})
Hope my question is clear to you.

You could do it with a reduce - filter alone won't work here as you're actually transforming child arrays rather than purely filtering the top level array items
routes.reduce((result, route) => {
const { path, children } = route;
if (children) {
const filteredChildren = children.filter(child => permissions.includes(child.path));
// case where some child routes match permissions
if (filteredChildren.length !== 0) {
return [ ...result, { ...route, children: filteredChildren }];
}
}
// case where path is present and permissions includes path
if (path && permissions.includes(path)) {
return [ ...result, route ];
}
// case where there's no match between path and permissions
return result;
}, []);

Try this!!
const routes = [
{
path:'/dashboard',
text: "Dashboard"
},
{
path:'/disputes',
text: "Disputes"
},
{
children: [
{
text: "Create Suburb",
path: "/create-suburb"
},
{
text: "View and Update Suburb",
path: "/view-suburb"
}
]
},
{
children: [
{
text: "Create user",
path: "/create-user"
},
{
text: "View and Update users",
path: "/view-users"
}
]
}
]
const permissions = ['/dashboard','/view-suburb'];
let result = [];
permissions.map(permission=>{
routes.map(route=>{
if(route.hasOwnProperty('children')){
route.children.map((r,i)=>{
if(r.path == permission){
route.children = route.children.splice(i);
route.children = route.children.slice(-1);
result.push(route)
}
});
}else{
if(route.path == permission){
result.push(route)
}
}
});
})
console.log(result)

This one also worked for me.
var newData = [];
$.each(routes, function (key, value) {
debugger
var data = this;
if (data.path) {
if (permissions.includes(data.path)) {
newData.push(data);
}
}
else {
var data2 = data;
$.each(data2, function (key, value1) {
$.each(value1, function (key, value) {
var data = value;
if (data.path) {
if (permissions.includes(data.path)) {
newData.push(data);
}
}
});
});
}
})

Ideally, you should check the access to the route inside the canActivate guard and navigate the user further to the appropriate route.

Javascript Tree Structure to Array conversion

I am working on a treeview and I build a simple Node-Class: It consists of a name and an array of children:
class Node {
constructor(name, childNodes) {
this.name = name;
this.childNodes = childNodes;
}
}
Now my aim is to create a function that returns an object like this:
var tree = [
{
text: 'Parent 1',
nodes: [
{
text: 'Child 1',
nodes: [
{
text: 'Grandchild 1'
}
]
},
{
text: 'Child 2'
}
]
},
{
text: 'Parent 2'
},
];
I tried using a recursive method. It starts with an empty array and adds children until there are no more left:
function recTreeview(currentNode, treeview) {
var tempChildren = [];
currentNode.childNodes.forEach(child => {
tempChild.push(recTreeview(child, treeview));
});
return treeview.push({
text: currentNode.name,
nodes: tempChildren
})
}
But something with the recursive Treeview Function has to be wrong. When I create the tree and try to open it in the chrome dev console, it just shows a "5" instead of something like (5) [{…}, {…}, {…}, {…}, {…}]. What did I do wrong?
tree = recTreeview(parent, []);
tree;

You are returning the result of the push and not the actual treeview.
As per the Array.prototype.push() docs
Return value
The new length property of the object upon which the method was called.
So instead of return treeview.push(...) do treeview.push(...) and then return treeview
function recTreeview(currentNode, treeview) {
var tempChildren = [];
currentNode.childNodes.forEach(child => {
tempChild.push(recTreeview(child, treeview));
});
treeview.push({
text: currentNode.name,
nodes: tempChildren
});
return treeview;
}

Why can't I access props within my component?

I've copied the Grid Component Example into a single-file component (Grid.vue). Within that component, I'm not able to access the columns prop. console.log(this.columns) always prints: [__ob__: Observer] to the log. Can someone tell me why? This works fine in their example on the page and in JSFiddle.
Here's my Grid.vue file:
<script>
export default {
name: 'grid',
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function() {
var sortOrders = {}
console.log(this.columns)
this.columns.forEach((column) => {
sortOrders[column] = 1
});
return {
sortCol: '',
sortOrders: sortOrders
}
},
computed: {
filteredData: function () {
var sortCol = this.sortCol
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortCol] || 1
var data = this.data
if (filterKey) {
data = data.filter((row) => {
return Object.keys(row).some((key) => {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortCol) {
data = data.slice().sort((a, b) => {
a = a[sortCol]
b = b[sortCol]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
},
methods: {
sortBy: function (key) {
this.sortCol = key
console.log(this.sortOrders[key])
this.sortOrders[key] = this.sortOrders[key] * -1
console.log(this.sortOrders[key])
}
},
created() {
},
mounted() {
// var app = this
},
}
</script>
I'm using this component within another component like so:
<template>
<div>
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
<grid :data="things" :columns="thingColumns" :filterKey="searchQuery"></grid>
</div>
</template>
<script>
import Grid from './Grid.vue';
export default {
name: 'things-grid',
data: function() {
return {
things: [],
thingColumns: [],
searchQuery: ''
}
},
mounted() {
var app = this
app.things = [
{id: 1, this: 'this 1', that: 'that 1', thing: 'thing 1'},
{id: 2, this: 'this 2', that: 'that 2', thing: 'thing 2'},
{id: 3, this: 'this 3', that: 'that 3', thing: 'thing 3'},
{id: 4, this: 'this 4', that: 'that 4', thing: 'thing 4'},
{id: 5, this: 'this 5', that: 'that 5', thing: 'thing 5'},
]
app.thingColumns = [
'this', 'that', 'thing'
]
app.searchQuery = ''
},
components: { Grid }
}
</script>

In:
<grid :data="things" :columns="thingColumns" :filterKey="searchQuery"></grid>
The value of this.thingColumns is passed as :columns when mounting.
Thus, the console.log(this.columns) inside Grid.vue/data() prints when it is mounting.
And when it is mounting, thingColumns is empty in the parent:
data: function() {
return {
things: [],
thingColumns: [], // initially empty
searchQuery: ''
}
},
mounted() {
var app = this
// ...
app.thingColumns = [ // this code only runs after it is mounted
'this', 'that', 'thing'
]
// ...
},
Since the console.log(this.columns) inside Grid.vue/data() prints when it is mounting, that is, before it is mounted, it prints an empty array:
[__ob__: Observer] // this is an empty array, the __ob__ thing is related to Vue internals
Because, well, parent's thingColumns will only have data after the mounted() hook executes.
And since it is a reactive array, when you update it, it will update the child grid component as well.
Solution:
Move the property initalization code from mounted() to created():
created() { // was mounted()
var app = this
// ...
app.thingColumns = [
'this', 'that', 'thing'
]
// ...
},
This will initialize the data sooner and make it available in time for the console.log() in the child to pick it up.

Update part of model from scope selected object

Ok, I have model with one property(provider) as object. It can change at all.
There is example, where I change provider. There can be any parametrs, image can has dpi, json can has another parametr.
So, when I select anoter provider, how to merge model property(provider) and updated provider?
this.providerWasChange = function() {
// here I should update model with provider parametrs(update full object)
$scope.provider
}
https://jsfiddle.net/77z165uj/11/
Hm,
var model = {
id: '1',
name: '',
childModels: [{
id: '1.1',
name: 'item1',
provider: {
name: 'imageProvider'
options: {
transparent: false,
dpi: 96
}
}
}, {
id: '1.2',
name: 'item2'
provider: {
name: 'jsonProvider'
options: {
uppercase: true,
}
}
}]
}
$scope.providers = [{
name: 'jsonProvider',
displayNmae: "jsonProvider",
options:{
uppercase:$scope.providerOptions,
}
}, {
name: 'imageProvider',
displayNmae: "imageProvider",
options:{
transparent:$scope.transparent,
dpi::$scope.dpi
}
}];
_changeProvider = function(data) {
if (data !== null) {
for (var i = 0; i < $scope.providers.length; i++) {
if ($scope.providers[i].name === data.name) {
$scope.providers[i].options = data.options
return $scope.providers[i];
}
};
}
}
I'm looking for a fuction or angular method, that set chosen provider blank with setted options from model back. For example, I'd like to change provider of item 2 to image provider(old values(if there is coincidence) should rewrites to model(item2), other should be deleted, and new - setted)