Drop Menu in React using filters - javascript

I wanted to ask if there is any way to make a dropdown menu in react using .map() and .filter(),
like for instance let's say that i have this file :
Data.js
export const NavigationMenu = [
{
id: 1,
title: "header item 1",
},
{
id: 2,
title: "header item 2",
}
];
export const NavigationDropMenu = [
{
id: 1,
title: "drop item 1",
parent: "header item 1",
},
{
id: 2,
title: "drop item 1",
parent: "header item 2",
}
];
what i want to do is to first map the items from the first list like this
<li className="header__menu__item">
{item.title}
</li>
))}
and inside of that i want to make another map for the dropmenu, which will fetch items from the second list but to use filter to show only elements that contain that element as a trait.
so to make it simpler, I want to know if it is possible to make a dropdown menu using .map() and .filter().
thank you.

Related

Vue.js same value getting passed into method

I am using v-for to loop through an array of objects. The list has a file input inside. On the change event of the file input, I am calling a method with a parameter. The problem is that the parameter value is not getting changed the same value is getting passed in all the file inputs.
<li v-for="(item, index) in this.ailment_details_form.items" :key="item.id">
<input type="file" v-on:change="handleFileUpload(item.id)" />
<label>#{{ item.id }}</label>
</li>
This is the method.
handleFileUpload(i) {
console.log(i);
}
Below is the data.
ailment_details_form: {
details: '',
items: [
{ id: 1, text: "Item 1" },
{ id: 2, text: "Item 2" },
{ id: 3, text: "Item 3" }],
files: [],
urls: []
}
Here item.id in handleFileUpload() method is always showing as 1. Where as inside label it is showing correctly. Please help.

How to pass one entry from a list as prop in Vue

Lets say I have the following list in data:
data: {
todos: [
{ id: 1, title: "Learn Python" },
{ id: 2, title: "Learn JS" },
{ id: 3, title: "Create WebApp" }
]
}
Now I want to pass only the entry with id of 2 to the prop:
<dynamic-prop :id=todos[2] :title="todos.title"> </dynamic-prop>
Is something like that possible in Vue?
Sure, you can pass any data on. Just don't forget to add quotation marks and mind the off-by-one problem. So if you want to pass the second element in a (zero-indexed) array, you'd write something like:
<dynamic-prop :id="todos[1].id" :title="todos[1].title"> </dynamic-prop>

React component not redraw when when props are updated

Quick info to describe the context.
I am working to a tree component that receives as prop this kind of data model:
workfolder: [{
label: "test",
folders: [
{ label: "label 1", id: 1 },
{ label: "label 2", id: 2 },
{ label: "label 3", id: 3 }
]
}];
All data are stored in a Redux store.
The initial value is:
state: { workfolder: [] }
On mount i fetch for default values and merge the results to workfolder in the reducer and i get my tree drawn.
return {
...state,
workfolder: results
}
When i click on one of the labels ( label 3 ) i fetch again for the sub-folders using the id and i get:
[{ label: "label 5", id: 5 },{ label: "label 5", id: 5 }]
At this point in the reducer i use a library to loop deep into the state till i find the property matching the id of the element i clicked ( label 3 in this case ) and want to merge the sub-folders into a new folder attribute.
let newState = JSON.parse(JSON.stringify(state.workfolder));
deepForEach( newState, (value, key, subject, path) => {
const isParentFolder = value === action.payload.parent;
const hasNotFolders = !subject.folders;
if( isParentFolder && hasNotFolders ) {
subject.folders = action.payload.node
}
} );
then i merge the new state in the store:
return {
...state,
workfolder: newState
}
Following this way i get the store updated, but the component won't redraw.
NOTE: this is a dummy example. In real life i have to deal with a multi level nested object having only the id and a string containing the path of the attribute i want to modify in the store.
The example that i found in the redux documentation shows how to do that writing statically the merge...

How do I get dynamic content in an AngularJS Accordion body

I can see how to get static content in an accordion body, but can't figure out how to generate dynamic content.
Taking the example at http://angular-ui.github.io/bootstrap/ the accordion is generated from ...
$scope.groups = [
{
title: "Dynamic Group Header - 1",
content: "Dynamic Group Body - 1"
},
{
title: "Dynamic Group Header - 2",
content: "Dynamic Group Body - 2"
}
];
What I want to achieve is generating an accordion from a two level structure thus ...
$scope.groups = [
{
title: "Dynamic Group Header - 1",
items: {[item-title: "item 1", item-title: "item 2"]}
},
{
title: "Dynamic Group Header - 2",
items: {[item-title: "item 3", item-title: "item 4"]}
}
];
Where each accordion body looks something like :-
<div ng-repeat="item in group[n].items"><li>{{item.item-title}}</li></div>
Such that the resulting HTML looks something like:-
Dynamic Group Header - 1
. item 1
. item 2
Dynamic Group Header - 2
. item 3
. item 4
Anything I put under content simply seems to get instantiated as innerHtml without any processing.
I'm not sure I fully got your use-case but assuming that you want to repeat over items inside accordion's body you could simply do it like so (markup):
<accordion>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
<ul>
<li ng-repeat="item in group.items">{{item['item-title']}}</li>
</ul>
</accordion-group>
</accordion>
When I was trying to use your JSON as an example I've noticed that it wan't well formated so it might be part of the difficulty you were facing. Here is the corrected JSON:
$scope.groups = [
{
title: "Dynamic Group Header - 1",
items: [{"item-title": "item 1"}, {"item-title": "item 2"}]
},
{
title: "Dynamic Group Header - 2",
items: [{"item-title": "item 3"}, {"item-title": "item 4"}]
}
];
and the working plunk: http://plnkr.co/edit/pjaekUXzvMQn9mOOArIH?p=preview

How do I create an object array to load dummy data into dynatree?

I am creating a wireframe that will use dynatree to display a tree. I would like to load some dummy data into the tree using an object array. I read the documentation and was able to load the parents using:
$(function() {
$("#catTree").dynatree({
children: ["Category 1","Category 2","Category 3","Category 4","Category 5","Category 6","Category 7","Category 8","Category 9"],
...
How do I amend this to show children of these categories? For example:
Category 1
sub category1
sub category2
etc..
children: [
{title: "Item 1"},
{title: "Item 2",
children: [
{title: "Sub-item 2.1"},
{title: "Sub-item 2.2"}
]
},
{title: "Item 3"}
]
above mentioned object is Javascript object or JSON object?

Categories