I need to use images in react native app, but right now I have to copy-paste a long dictionary to access all these images. I want to use this dictionary across components as well, so the relative path would change. But, the absolute path is connected to my computer and there are other computers working on this project as well. Is there anyway I could make a JSON file to store this and then import it somewhere?
const collegesData = {
"Benjamin Franklin": {
name: "Benjamin Franklin",
flag: require("../../assets/images/college-logos/franklin-flag.png"),
points: 0,
},
"Berkeley": {
name: "Berkeley",
flag: require("../../assets/images/college-logos/berkeley-flag.png"),
points: 0,
},
"Pauli Murray": {
name: "Pauli Murray",
flag: require("../../assets/images/college-logos/murray-flag.png"),
points: 0,
},
"Timothy Dwight": {
name: "Timothy Dwight",
flag: require("../../assets/images/college-logos/td-flag.png"),
points: 0,
},
"Silliman": {
name: "Silliman",
flag: require("../../assets/images/college-logos/silliman-flag.png"),
points: 0,
},
"Ezra Stiles": {
name: "Ezra Stiles",
flag: require("../../assets/images/college-logos/stiles-flag.png"),
points: 0,
},
"Morse": {
name: "Morse",
flag: require("../../assets/images/college-logos/morse-flag.png"),
points: 0,
},
"Branford": {
name: "Branford",
flag: require("../../assets/images/college-logos/branford-flag.png"),
points: 0,
},
"Davenport": {
name: "Davenport",
flag: require("../../assets/images/college-logos/davenport-flag.png"),
points: 0,
},
"Jonathan Edwards": {
name: "Jonathan Edwards",
flag: require("../../assets/images/college-logos/je-flag.png"),
points: 0,
},
"Grace Hopper": {
name: "Grace Hopper",
flag: require("../../assets/images/college-logos/hopper-flag.png"),
points: 0,
},
"Saybrook": {
name: "Saybrook",
flag: require("../../assets/images/college-logos/saybrook-flag.png"),
points: 0,
},
"Trumbull": {
name: "Trumbull",
flag: require("../../assets/images/college-logos/trumbull-flag.png"),
points: 0,
},
"Pierson": {
name: "Pierson",
flag: require("../../assets/images/college-logos/pierson-flag.png"),
points: 0,
},
};
Related
I'm currently new to ioredis and I was wondering how o I can search all the json object that has a key value of something.
Example
rooms:{
roomId1: {
name: "room1",
users: [{userId: 1, name: "bob"}, {userId: 2, name: "joe}]
},
roomId2: {
name: "room2",
users: [{userId: 1, name: "jill"}, {userId: 2, name: "joe}]
},
roomId3: {
name: "room3",
users: [{userId: 6, name: "hoi"}, {userId: 1, name: "bob}]
}
}
and I want find all the rooms that has the user "bob" so I want the output to be
[roomId1: {
name: "room1",
users: [{userId: 1, name: "bob"}, {userId: 2, name: "joe}]
}, roomId3: {
name: "room3",
users: [{userId: 6, name: "hoi"}, {userId: 1, name: "bob}]
}]
How cna i achievee this? I guess I can do something like this
const redis = new Redis();
const roomStates = await redis.get("rooms");
//for loop and inner for loop to find the users name bob
but I was wondeirng if theres a faster way of doing it using the redis built in functions
I am stuck on a page where i am not able to display the charts on the page.
To make it simplify what I have done is, here is the code sandbox:
I see there an error in console about the data, I am not sure about it.
https://codesandbox.io/s/compassionate-snyder-bckoq
I want to display the chart like this (as an example), but I am not able to display on the code sandbox
Please help.
The format of series is not aligned with ApexCharts.
You need to transform the data to match with ApexChart format.
Please see the changes in the codesandbox.
https://codesandbox.io/s/small-dew-eztod?file=/src/components/HelloWorld.vue
options: {
// X axis labels
xaxis: {
type: 'date',
categories: ["2021-05-04", "2021-05-05", "2021-05-07"]
},
},
series: [
{
name: "total",
data: [2, 2, 1],
},
{
name: "pending",
data: [0, 1, 0],
},
{
name: "approved",
data: [2, 1, 1],
},
{
name: "rejected",
data: [0, 0, 0],
},
],
Transform data to fit ApexChart
const data = {
"2021-05-04": {
total: 2,
pending: 0,
approved: 2,
rejected: 0,
},
"2021-05-05": {
total: 2,
pending: 1,
approved: 1,
rejected: 0,
},
"2021-05-07": {
total: 1,
pending: 0,
approved: 1,
rejected: 0,
},
};
const xaxis = {
type: "date",
categories: Object.keys(data).map((key) => key), // ['2021-05-04', '2021-05-05', '2021-05-07']
};
let statusObj = [];
for (const dataValue of Object.values(data)) { // get the values from keys '2021-05-04', '2021-05-05' ...
// loop the values, e.g. 1st loop: { total: 2, pending: 0, approved: 2, rejected: 0, }
for (const [key, value] of Object.entries(dataValue)) {
// take 'total' as example, find if statusObj already has { name: 'total', data: [x] }, e.g. statusObj = { name: 'total', data: [1] }
const existingStatusIndex = Object.keys(statusObj).find(
(sKey) => statusObj[sKey].name === key
);
// if yes, return the index of it
if (existingStatusIndex) {
// add new data value to existing data object. e.g. { name: 'total', data: [1, 2] }
statusObj[existingStatusIndex].data.push(value);
continue;
}
// if no, create a new object and add it to statusObj
statusObj.push({
name: key,
data: [value],
});
}
}
Output:
xaxis {
type: 'date',
categories: [ '2021-05-04', '2021-05-05', '2021-05-07' ]
}
statusObj [
{ name: 'total', data: [ 2, 2, 1 ] },
{ name: 'pending', data: [ 0, 1, 0 ] },
{ name: 'approved', data: [ 2, 1, 1 ] },
{ name: 'rejected', data: [ 0, 0, 0 ] }
]
So I'm setting a default query in my React Native app. Essentially I'm trying to set a sortOrder based on the elementOrder values. My partner used this same piece of code in his web app and it works for him. It doesn't seem to work on my end. The score exists if I remove the custom sort, which is normal due to what I've read in the docs. When I'm using a custom sort, then I should add track_scores: true. My score is still coming up as null.
I am not sure how to debug this situation. Can someone point me in the right direction? Thanks! Here's my code and let me know if you need to see anything. Unfortunately I don't have access to Kibana. I'm just console logging the list item and it's properties.
const defaultQueryConfig = {
track_scores: true,
sort: {
_script: {
type: 'number',
script: {
lang: 'painless',
source: `
int sortOrder = 0;
if (doc['elementOrder'].value == 1) {sortOrder = 3}
else if (doc['elementOrder'].value == 3) {sortOrder = 2}
else if (doc['elementOrder'].value == 2) {sortOrder = 1}
sortOrder;
`,
},
order: 'desc',
},
},
query: {
function_score: {
query: {
match_all: {},
},
functions: [
{
filter: {
match: {
categoryType: 'earth',
},
},
weight: 100,
},
{
filter: {
match: {
categoryType: 'water',
},
},
weight: 90,
},
{
filter: {
match: {
categoryType: 'fire',
},
},
weight: 80,
},
{
filter: {
match: {
thingExists: false,
},
},
weight: 2,
},
],
score_mode: 'multiply',
},
},
};
I have array. in that array there is a field name debit. I want to add all the debit on this array and find the total. I am trying to do this with reduce function. but it's adding number as character not calculating the sum of the array number. here is the code
export default {
data() {
return {
fields: {
debit: 0,
credit: 0,
type: '',
},
fields: [],
allDebit: 0,
allCredit: 0,
}
},
methods: {
newfield() {
this.fields.push({
debit: 0,
credit: 0,
type: '',
})
},
dataRemove(index) {
Vue.delete(this.fields, index);
},
calculate() {
this.allDebit = this.fields.reduce((acc, item) => acc + item.debit, 0);
}
}
}
output:
{
"fields": [
{
"debit": "4",
"credit": "2",
"type": ""
},
{
"debit": "4",
"credit": "2",
"type": ""
}
],
"allDebit": "044",
"allCredit": 0
}
fields: {
debit: 0,
credit: 0,
type: '',
},
fields: [],
You specify object fields and array in the data. You cannot have an object with two identical keys in the object literal. That is not a valid JS. I wouldn't be surprised if that was the reason.
Also, your values in output seem to all be strings. Try parseInt function in the reduce function.
convert string to number and then sum them
calculate() {
this.allDebit = this.fields.reduce((acc, item) => Number(acc) + Number(item.debit), 0);
}
Rename first fields to field, or remove it completely, I do not see where do you use it.
Parse to integer item.debit either in the accumulator or in the place where do you set it.
The possible fix:
export default {
data() {
return {
field: {
debit: 0,
credit: 0,
type: '',
},
fields: [],
allDebit: 0,
allCredit: 0,
}
},
methods: {
newfield() {
this.fields.push({
debit: 0,
credit: 0,
type: '',
})
},
dataRemove(index) {
Vue.delete(this.fields, index);
},
calculate() {
this.allDebit = this.fields.reduce((acc, item) => acc + parseInt(item.debit), 0);
}
}
}
export default {
data() {
return {
fields: { // this is identical to the fields: [] array
// you need to rename it to something like field (Singular)
debit: 0,
credit: 0,
type: '',
},
// maybe you ment
field: { // field (Singular)
debit: 0,
credit: 0,
type: '',
},
//
fields: [], // THIS !!!
allDebit: 0,
allCredit: 0,
}
},
methods: {
newfield() {
this.fields.push({
debit: 0,
credit: 0,
type: '',
})
},
calculate() {
const { debit } = this.fields.reduce((acc, item) => {
return { debit: acc.debit + item.debit };
}, { debit: 0 })
this.allDebit = debit;
}
}
}
You can't have 2 identical keys in the data function property.
I would do this in a computed property instead, so that the value is calculated again if fields changes.
computed: {
allDebit() {
return this.fields.reduce((acc, item) => acc + parseInt(item.debit), 0);
}
}
EDIT: You can't have two properties with the same key in your data function. You have fields two times.
I am struggling to use callout line with client-side graphics.
I followed the "Point styles for cities" example which uses a feature layer from the "LyonPointsOfInterest (FeatureServer)".
But it doesn't work with a feature layer which creates client-side graphics based on data returned from a web service.
Is there a limitation on 3d callout line?
Here's my code snippet:
Create a feature layer based on layer definition:
featureLayer = new FeatureLayer({
fields: this.layerDefinition.fields,
objectIdField: this.layerDefinition.objectIdField,
geometryType: this.layerDefinition.geometryType,
id: this.layerId
});
Set elevation and feature reduction and renderer:
featureLayer.elevationInfo = {
// elevation mode that will place points on top of the buildings or other SceneLayer 3D objects
mode: "relative-to-scene"
};
// feature reduction is set to selection because our scene contains too many points and they overlap
featureLayer.featureReduction = {
type: "selection"
};
featureLayer.renderer = this._getUniqueValueRenderer() as any as Renderer// callout render
Here the renderer code:
_getUniqueValueRenderer() {
let verticalOffset = { // verticalOffset shifts the symbol vertically
screenLength: 150, // callout line length
maxWorldLength: 200,
minWorldLength: 35
},
uniqueValueRenderer = {
type: "unique-value", // autocasts as new UniqueValueRenderer()
field: "AQHI",
uniqueValueInfos: [{
value: 1,
symbol: this._get3DCallOutSymbol(verticalOffset, "Museum.png", "#D13470")
}, {
value: 2,
symbol: this._get3DCallOutSymbol(verticalOffset, "Restaurant.png", "#F97C5A")
}, {
value: 3,
symbol: this._get3DCallOutSymbol(verticalOffset, "Church.png", "#884614")
}, {
value: 4,
symbol: this._get3DCallOutSymbol(verticalOffset, "Hotel.png", "#56B2D6")
}, {
value: 5,
symbol: this._get3DCallOutSymbol(verticalOffset, "Park.png", "#40C2B4")
}, {
value: 6,
symbol: this._get3DCallOutSymbol(verticalOffset, "Museum.png", "#D13470")
}, {
value: 7,
symbol: this._get3DCallOutSymbol(verticalOffset, "beer.png", "#F97C5A")
}, {
value: 8,
symbol: this._get3DCallOutSymbol(verticalOffset, "senate.png", "#884614")
}, {
value: 9,
symbol: this._get3DCallOutSymbol(verticalOffset, "Hotel.png", "#56B2D6")
}, {
value: 10,
symbol: this._get3DCallOutSymbol(verticalOffset, "Park.png", "#40C2B4")
}
]};
return uniqueValueRenderer;
}
_get3DCallOutSymbol(verticalOffset: any, iconName: string, color: string) {
return {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [{
type: "icon", // autocasts as new IconSymbol3DLayer()
resource: {
href: this.iconPath + iconName
},
size: 20,
outline: {
color: "white",
size: 2
}
}],
verticalOffset: verticalOffset,
callout: {
type: "line", // autocasts as new LineCallout3D()
color: "white",
size: 2,
border: {
color: color
}
}
};
}
Set source to an array of graphics, generated based web service data
featureLayer.source = graphics;
You should not use this.layerDefinition in the instanciation a your new FeatureLayer, but put it in a new var. Idem for this.layerId :
var layerDef = this.layerDefinition;
var lyrId = this.layerId;
featureLayer = new FeatureLayer({
fields: layerDef.fields,
objectIdField: layerDef.objectIdField,
geometryType: layerDef.geometryType,
id: lyrId
});
because this. at this place, is in the scope of new Feature()