I am tring to use react-charts and the object they give as example data looks like this.
chartData: [
{
label: 'Series 1',
data: [
[0, 1],
[1, 2],
[2, 4],
[3, 2],
[4, 7],
],
},
],
I want to build my own "data" and replace this temporary data but the whole object of arrays in objects in arrays (Or whatever it is confuses me.
Can someone explain the nesting here.
Is it an array of 2 objects label and data and data` is an array of key value pairs. Is that accurate?
I'm kind of trying something like this...
let myData = []
res.data.payload.forEach(function (item, index) {
console.log(item, index)
myData[(index, item.odds)]
})
this.setState({ chartData[data]: myData })
Am I even close?
Thanks
You can do like this
let myData = []
res.data.payload.forEach(function (item, index) {
console.log(item, index)
myData.push([index, item.odds])
})
this.setState({ chartData: [{...this.state.chartData[0], data: myData}] })
Related
I am trying to create a filtering system for some items by checking if the selected items exist in the presented values.
So my selectable array can range from 0 to 6, and each item contains an array of Ints that it is associated with:
let items = [
Item(cat: [1, 2, 3]),
Item(cat: [0, 6]),
Item(cat: []),
Item(cat: [0, 1])
]
I wanted to create a function that would check if any of the cat values were in the selected Ints:
#Published var filteredCats: [Int] = []
func filterByInt(array: [Item]) -> [Item] {
let output = array.filter({
guard let cats = $0.cats else { return true }
for cat in cats {
return filteredCats.contains(cat)
}
})
return output
}
But I'm having issue with the above since it returns in the loop on the first iteration, so if I was searching for 1 in the above items then Item(cat: [0, 1]) exits at false as the first looped check is 0==1.
Essentially I want to be able to do the following (in expanded terms):
let filter = [0, 3, 4]
let items = [
[1, 2, 3],
[2, 3],
[],
[5, 6, 7]
]
items.contains(filter) // --> return the arrays
Sorry if this is basic but I've been trying to find a good solution.
Checking uniqueness is where a Set can help
struct Item {
var cat: Set<Int>
}
let items = [
Item(cat: [1, 2, 3]),
Item(cat: [0, 6]),
Item(cat: []),
Item(cat: [0, 1])
]
let wanted: Set<Int> = [0, 3, 4]
let filtered = items.filter { !$0.cat.isDisjoint(with: wanted) }
I'd suggest someSatisfy (or any in Kotlin):
We can utilize allSatisfy with double negations (one for allSatisfy, the other for contains) for that:
struct Item: CustomDebugStringConvertible {
let cat: [Int]
var debugDescription: String {
"[" + cat.map { String($0) }.joined(separator: ", ") + "]"
}
}
func filterByInt(items: [Item], filter: [Int]) -> [Item] {
// Early return might make sense if the filter is empty.
// guard !filter.isEmpty else { return items }
items.filter { item in
!filter.allSatisfy {
filterItem in !item.cat.contains(filterItem)
}
}
}
let filter = [0, 3, 4]
let items: [Item] = [
.init(cat: [1, 2, 3]),
.init(cat: [2, 3]),
.init(cat: []),
.init(cat: [5, 6, 7])
]
print(filterByInt(items: items, filter: filter))
// [[1, 2, 3], [2, 3]]
print(filterByInt(items: items, filter: [5]))
// [[5, 6, 7]]
print(filterByInt(items: items, filter: []))
// []
I have a 2D array that I'm mapping in jsx
I am trying to access the outer array index inside the second mapping func
Any ideas would be much appreciated
Something like this:
let arr = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];
{arr.map((innerArr, idx) => {
return innerArr.map((item) => {
return (
<p>
{idx}: {item}
</p>
);
});
})}
I'm having an object like this
{
"GroupA": {
"Parent1": [1, 2, 3],
"Parent2": [1, 2, 3],
"Parent12": [1, 2, 3]
},
"GroupB": {
"Parent13": [1, 2, 3],
"Parent5": [1, 2, 3]
},
"GroupC": {
"Parent7": [1, 2, 3]
}
}
Now i want to filter this object by searching the name of the Parent
For example when I search parent1 the result should be
{
"GroupA": {
"Parent1": [1, 2, 3],
"Parent12": [1, 2, 3]
},
"GroupB": {
"Parent13": [1, 2, 3],
}
}
Here is my solution but it's not working correctly if a Group has many similar Parent name it only return the first one. And when I try to set state it filter like all wrong value
let newData = []
let catalogArr = Object.entries(catalogList)
const handleSearchElement = (e) => {
const value = e.target.value
catalogArr.forEach(catalog => {
let filteredKeys = Object.keys(catalog[1]).filter(name => name.toLowerCase().includes(value.toLowerCase()))
let valuesOfKey
if(filteredKeys[0]) {
valuesOfKey = {
[filteredKeys[0]]: Object.values(catalog[1][filteredKeys[0]])
}
newData.push([catalog[0], {...valuesOfKey}])
}
})
console.log(Object.fromEntries(newData));
setCatalogList(Object.fromEntries(newData))
// console.log(catalogList);
}
You can use Array#reduce to accomplish this pretty easily, however, all of the packing and unpacking of objects using Object.entries and Object.fromEntries to essentially treat them as arrays suggests you may be using the wrong data structure.
If you need to do this repeatedly, look into doing a one-off transformation that arranges the data for O(1) access, for example, by grouping on inner keys rather than outer keys (hard to say since I don't know the data or use case). Or, if you're mostly iterating, consider using arrays.
const data = {
"GroupA": {
"Parent1": [1, 2, 3],
"Parent2": [1, 2, 3],
"Parent12": [1, 2, 3]
},
"GroupB": {
"Parent13": [1, 2, 3],
"Parent5": [1, 2, 3]
},
"GroupC": {
"Parent7": [1, 2, 3]
}
};
const targetKey = "parent1";
const res = Object.entries(data).reduce((a, [k, v]) => {
const filtered = Object.entries(v).filter(([k, ]) =>
k.toLowerCase().includes(targetKey.toLowerCase())
);
if (filtered.length) {
a[k] = Object.fromEntries(filtered);
}
return a;
}, {});
console.log(res);
Categories do not change despite I changed config.
https://codesandbox.io/s/highcharts-react-demo-j7hoi
I want to show categories like in config.
In API we can read:
type: Highcharts.AxisTypeValue
(...) In a category axis, the point names of the chart's series are used for
categories, if not a categories array is defined.
So, you also need to update the x values:
} else {
this.setState({
options: {
...,
series: [
{
data: [[0, 3], [1, 45], [2, 12]]
}
]
}
});
}
Live demo: https://codesandbox.io/s/highcharts-react-demo-4x8np
API: https://api.highcharts.com/highcharts/xAxis.type
I have a Flux Store and a state array that needs updating when a new comment is created so that a list of comments updates in the view. I just want to confirm that I am updating it correctly using push:
this.state.comments.push(commentArray);
It works fine but I have read about immutability but as this is a store and not a view I take it this is ok?
onDispatcherAction: function (payload) {
var action = payload.action;
if (ActionTypes.CREATE_CONFIGURATION_SETTINGS_RESPONSE === action.type) {
this.handleResponseErrors(action.data);
var commentArray = {
_id: action.data._id,
user: {
id: action.data.user.id
},
id:action.data.id,
commentname: action.data.commentname,
timeCreated: action.data.timeCreated
}
this.state.commentname = action.data.commentname;
this.state.comments.push(commentArray);
this.emitChange();
}
}
You probably should take a look to the Immutability Helpers.
From React Documentation
Simple push
var initialArray = [1, 2, 3];
var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
initialArray is still [1, 2, 3].