I have an array of below format
constructor(){
super();
this.state = {
details: [
{
id: 1,
class: '10',
section: 'A',
subject: 'Social',
name: 'abc'
},
{
id: 2,
class: '8',
section: 'C',
subject: 'Social',
name: 'abc'
},
{
id: 3,
class: '9',
section: 'A',
subject: 'Social',
name: 'abc'
}
]
}
I want to update each name in a loop. How can I update the state. I am trying with the below code.
this.state.details.map((item, key) => {
this.setState({
details.key.name: 'trial'
})
})
You can do it like this.
modifiedData = this.state.details.map((item, index) => { return { ...item, name: "trial" } })
Related
I am trying to show metabolite-protein interaction using cytoscape.min.js. I am using the circle layout to view the network.
I have two types of node in the network,"prot" and "met". For the better visualization, I want to create a circular layout with the node "met" at the center. In this case, I want to keep the metabolite (here node 'a') at the center of the circle. How to do the same ?
Thanks,
Santosh
My script for cytoscape.min.js is as follows:
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// nodes
{ data: { id: 'a', type: "met" } },
{ data: { id: 'b', type: "prot" } },
{ data: { id: 'c', type: "prot" } },
{ data: { id: 'd', type: "prot" } },
{ data: { id: 'e', type: "prot" } },
{ data: { id: 'f', type: "prot" } },
// edges
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
},
{
data: {
id: 'ae',
source: 'a',
target: 'e'
}
},
{
data: {
id: 'cd',
source: 'c',
target: 'd'
}
},
{
data: {
id: 'ef',
source: 'e',
target: 'f'
}
},
{
data: {
id: 'ac',
source: 'a',
target: 'c'
}
},
{
data: {
id: 'be',
source: 'b',
target: 'e'
}
}
],
style: [
{
selector: 'node[type="prot"]',
style: {
'shape': 'circle',
'background-color': 'red',
label: 'data(id)'
}
},
{
selector: 'node[type="met"]',
style: {
'shape': 'square',
'background-color': 'blue',
label: 'data(id)'
}
}]
});
cy.layout({
name: 'circle',
animate: true
}).run();
</script>
I'm trying to create a search form with input text fields and checkboxes.
Right now I have the search working for text fields but I can't make it work for checkboxes.
I'm totally new with vue.js so probably I'm missing some basic stuff.
The problem is in the computed part in the last filter, with the categories checkboxes:
computed: {
filteredExperiences() {
return this.experiences.filter( item => {
return (
item.destination.toLowerCase().indexOf(this.searchDestinations.toLowerCase()) > -1
&& item.title.toLowerCase().indexOf(this.searchExperiences.toLowerCase()) > -1
&& item.categories.map(cat => cat.title.toLowerCase()).indexOf(this.checkedCategories.toLowerCase()) > -1
)
})
}
}
So searchDestinations and searchExperiences work fine but search by categories doesn't.
Any idea why? What am I doing wrong?
This is the full code:
var app = new Vue({
el: '#app',
data: {
destinations: [{
title: 'Madrid',
slug: 'madrid'
},
{
title: 'London',
slug: 'london'
},
{
title: 'Chicago',
slug: 'chicago'
},
{
title: 'Los Angeles',
slug: 'los-angeles'
}
],
categories: [{
title: 'Concerts',
slug: 'concerts'
},
{
title: 'Museums',
slug: 'museums'
},
{
title: 'Theaters',
slug: 'theaters'
},
{
title: 'Cinemas',
slug: 'cinemas'
}
],
experiences: [{
id: 1,
title: 'Bruce Springsteen Live Madrid',
destination: 'Madrid',
categories: ['concerts', 'theaters'],
duration: '2h'
},
{
id: 2,
title: 'Mulan 2 the movie',
destination: 'London',
categories: ['cinemas', 'theaters'],
duration: '2h'
},
{
id: 3,
title: 'British Museum',
destination: 'London',
categories: ['museums'],
duration: '3h'
}
],
checkedCategories: [],
searchDestinations: '',
searchExperiences: ''
},
computed: {
filteredExperiences() {
return this.experiences.filter(item => {
return (item.destination.toLowerCase().indexOf(this.searchDestinations.toLowerCase()) > -1 && item.title.toLowerCase().indexOf(this.searchExperiences.toLowerCase()) > -1)
})
}
}
});
Here is the codepen:
See the Pen
vue.js filtered multi-search by Javier (#oterox)
on CodePen.
the problem is here:
&& item.categories.map(cat => cat.title.toLowerCase()).indexOf(this.checkedCategories.toLowerCase()) > -1
like this it should work:
computed: {
filteredExperiences() {
return this.experiences.filter( item => {
if(item.destination.indexOf(this.searchDestinations) < 0) { return false }
if (item.title.indexOf(this.searchExperiences) < 0 ) { return false }
let matchedCats = item.categories.filter(cat => {
let hasCat = this.checkedCategories.findIndex(checkCat => cat.toLowerCase() === checkCat.toLowerCase());
return hasCat > -1;
})
if(this.checkedCategories.length > 0 && matchedCats.length < 1)
{
return false;
}
return true;
})
}
}
I created Vue application and I have simple store:
const paginationStore = {
data: {
entitiesDisplayOptions: [
{ value: '1', text: '1' },
{ value: '2', text: '2' },
{ value: '4', text: '4' },
{ value: '999999', text: 'All' },
],
paginationLimits: {
bottom: 0,
top: paginationStore.data.entitiesDisplayOptions[0].value
}
}
}
I'm getting error:
Uncaught TypeError: Cannot read property 'data' of undefined
Why I can't set value from entitiesDisplayOptions to paginationStore.data.paginationLimits.top? What should I do to make it works?
You could store it in a variable outside the definition:
const newEntitiesDisplayOptions = [
{ value: '1', text: '1' },
{ value: '2', text: '2' },
{ value: '4', text: '4' },
{ value: '999999', text: 'All' },
];
const paginationStore = {
data: {
entitiesDisplayOptions: newEntitiesDisplayOptions ,
paginationLimits: {
bottom: 0,
top: newEntitiesDisplayOptions[0].value
}
}
}
There is lot of possibilities. Everything you have to do is to remember you can't reference the other object properties at the moment of creation of object in the form of object literal.
const entitiesDisplayOptions = [
{ value: '1', text: '1' },
{ value: '2', text: '2' },
{ value: '4', text: '4' },
{ value: '999999', text: 'All' },
]
const paginationLimits = {
bottom: 0,
top: paginationStore.data.entitiesDisplayOptions[0].value
}
const paginationStore = {
data: {
entitiesDisplayOptions,
paginationLimits
}
}
Is it possible to obtain a circular hierarchy in Cytoscape js?
The breadthfirst layout gives a generic hierarchy layout, if somehow nodes could be arranged in a circrular hierarchy (with roots being in the center...), please do let me know the way out.
Thanks
Have you tried the concentric options for the breadth-first layout? By default breadth-first gives a pyramid-like layout but you can specify a circular layout.
For example:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: {
nodes: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } }
],
edges: [
{ data: { id: 'ae', weight: 1, source: 'a', target: 'e' } },
{ data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
{ data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
{ data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
{ data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
{ data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
{ data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
]
},
layout: {
name: 'breadthfirst',
circle: true,
root: 'a',
},
});
See https://jsfiddle.net/josephst18/kznos1x9/2/ for the rest of my code.
I have 2 checkboxes, Its called A and B. When i click on the checkbox A, then all the a particular field in the Grid should filter all the values with the value A in it.
If i click B, then the filed in the grid should filter and display all the values that has B in it.
If i click both, then both A and B should be displayed.
if (chkbxVal== 'A') {
console.log('Only A');
return rec.get('gridField') == 'A';
} else if (chkbxVal == 'B'){
console.log('Only B');
return rec.get('gridField') == 'B';
} else {
console.log('both A and B');
return rec;
}
The above, works if i have 2 checkboxes. But what if i have 3 checkboxes (or more). Should i have 9 if-else conditions for it to work ? Look at the following prototype, it is only for 3 checkboxes, and i have like 6 or 7 then i should have 36 - 49 if-else conditions ? I am having a logic issue can someone help me ?
if (A){
// display A
} else if (B) {
// display B
} else if (C) {
//display C
} else if (A and B) {
//display A and B
} else if (A and C) {
// display A and C
} else if (B and C) {
//display B and C
} else {
// display all
}
No, that would not be a good idea. Here's an example, it only goes up to 'E' but the example scales:
Ext.require('*');
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['name', 'filterField']
})
Ext.onReady(function(){
var active = [];
function onBoxChange() {
active = [];
form.items.each(function(item){
if (item.checked) {
active.push(item.inputValue);
}
});
updateGrid();
}
function updateGrid() {
store.suspendEvents();
store.clearFilter();
store.filterBy(function(rec){
return Ext.Array.indexOf(active, rec.get('filterField')) > -1;
});
store.resumeEvents();
grid.getView().refresh();
}
var items = [];
Ext.Array.forEach(['A', 'B', 'C', 'D', 'E'], function(name){
items.push({
boxLabel: name,
xtype: 'checkbox',
inputValue: name,
checked: true,
listeners: {
change: onBoxChange
}
});
});
var form = new Ext.form.Panel({
flex: 1,
items: items
});
var store = new Ext.data.Store({
model: MyModel,
data: [{
name: 'A1',
filterField: 'A'
}, {
name: 'A2',
filterField: 'A'
}, {
name: 'A3',
filterField: 'A'
}, {
name: 'B1',
filterField: 'B'
}, {
name: 'B2',
filterField: 'B'
}, {
name: 'C1',
filterField: 'C'
}, {
name: 'C2',
filterField: 'C'
}, {
name: 'C3',
filterField: 'C'
}, {
name: 'D1',
filterField: 'D'
}, {
name: 'E1',
filterField: 'E'
}, {
name: 'E2',
filterField: 'E'
}, {
name: 'E3',
filterField: 'E'
}, {
name: 'E4',
filterField: 'E'
}]
});
var grid = new Ext.grid.Panel({
flex: 1,
store: store,
columns: [{
dataIndex: 'name',
text: 'Name'
}]
});
new Ext.container.Viewport({
layout: {
type: 'vbox',
align: 'stretch'
},
items: [form, grid]
});
});