I have a piece of text and every time you click on it the text changes to the next item in the object. I also need the name of the one saying the text so I used a multidimensional array like this:
let texts = {
0:{
"name" : "Bob",
"text" : "Hello, this is a text",
},
1:{
"name" : "Peter",
"text" : "Hey there.",
},
};
This is my state:
this.state = {
textNumber: 0,
};
And this is the function I call onPress:
nextScene = () => {
if(this.state.textNumber >= Object.keys(texts).length-1){
}
else{
this.setState({textNumber: this.state.textNumber+1})
}
};
It works perfectly just the way I want it. But my question is: is this the way it should be done in React Native? Or is there a better way?
You probably want an array of objects:
let texts = [
{
"name" : "Bob",
"text" : "Hello, this is a text",
},
{
"name" : "Peter",
"text" : "Hey there.",
},
];
Then you can do:
if(this.state.textNumber < this.state.texts.length-1) {
this.setState({textNumber: this.state.textNumber+1});
}
If you want a loop, you can also do the following:
this.setState({textNumber: this.state.textNumber+1 % this.state.texts.length});
About your question, there is no difference between doing this in React Native or not. This is merely JS.
It is fine to keep this in the state (both React or RN). If you want more fancy solution you can write a HOC to manage the state of your component (see for example recompose).
const DATA = [
{
'title': 'Test Series (12,13)',price:"1000",
},
];
Related
I added data to a realm using
realm.write(() => {
for (const player in players) {
realm.create('Player', {
id: player.id,
firstname: player.firstname,
lastname: player.lastname,
});
}
});
players is a JSON array.
[
{
"id": 9687,
"firstname": "Nyeem",
"lastname": "Young",
},
{
"id": 100,
"firstname": "Jason",
"lastname": "Holder",
}]
I was able to confirm that the data was entered successfully by using
realmPlayers = realm.objects('Player');
console.log(`There are ${realmPlayers.length} players`); // 99
However when I try to get all the players
console.log(realmPlayers)
I get the error
[TypeError: item.toJSON is not a f
unction. (In 'item.toJSON(index.toString(), cache)', 'item.toJSON' is undefined)]
console.log(JSON.stringify(realmPlayers)); gives the same error.
console.log(realmPlayers[0]); returns {}
Trying to use a filter
realm.objects('Player').filtered('lastname = Young');
I get the error
Failed to open the realm 'Player' has no property: 'Young'
If I have items in the database why can't I access it. Ultimately what I want to do is to get all the items in the database and pass the result to a FlatList component in React Native..
How can I get the data and possible visualize it via the command line?
I want to push my data in array but it shows me string in react native.
My code is like that:
const dataSource = responseJson.old_cases.reduce(function (sections, item) {
let section = sections.find(section => section.gender === item.gender);
if (!section) {
section = { gender: item.gender,data:[] };
sections.push(section);
}
section.data.push(item.name)
return sections;
}, []);
this.setState({dataSource: dataSource // Pass the dataSource that we've processed above});
Output of my code is
[
{"gender": "Male", "data": ["name_1", "name_2"]},
{"gender": "Female", "data": ["name_3", "name_4",'name_5']},
]
as you see names are string I need that kind of output
[
{"gender": "Male", "data": [{"name_1"}, {"name_2"}]},
{"gender": "Female", "data": [{"name_3"}, {"name_4"},{'name_5'}]},
]
We cannot apply string values inside the objects.
like.
[
{"gender": "Male", "data": [{"name_1"}, {"name_2"}]},
{"gender": "Female", "data": [{"name_3"}, {"name_4"},{'name_5'}]},
]
We have to apply key-value pairs like below:
section.data.push({ [item.name]: item.name })
Copy this and replace for your code, I think it's what you need. But I'm not sure.
const dataSource = responseJson.old_cases.reduce(function (sections, item) {
let section = sections.find(section => section.gender === item.gender);
if (!section) {
section = { gender: item.gender,data:[] };
sections.push(section);
}
section.data.push({[item.name]: item.name})
return sections;
}, []);
this.setState({dataSource: dataSource // Pass the dataSource that we've processed above});
First I create a website by vue and I pass parameter to my google appscript
vue function
var appurl = "my google appscript url"
this.$http.get(appurl, {
params: {
settingLink: this.settingLink,
albumLink: this.albumLink,
stepControl: this.stepControl,
nav: this.navSetting,
}
}).then(response => {
console.log(response);
})
and I send parameter to google appscript
my google appscript
function doGet(e) {
var params = e.parameter;
var settingLink = params.settingLink;
var albumLink = params.albumLink;
var stepControl = params.stepControl;
var nav = params.nav;
var SpreadSheet = SpreadsheetApp.openByUrl(settingLink);
var SheetName = SpreadSheet.getSheetByName("gameSetting");
SheetName.getRange("D2").setValue(stepControl);
SheetName.getRange("E2").setValue(albumLink);
SheetName.getRange("F2").setValue(nav[0].style);
SheetName.getRange("G2").setValue(nav[1].style);
SheetName.getRange("H2").setValue(nav[2].style);
}
The parameter albumLink and stepControl are string so I success push it to my spreadsheet (figure 1)
but nav is an array object like (in vue data)
nav=[
{style:"red",content:"test"},
{style:"blue",content:"test"},
{style:"green",content:"test"},
]
How could I let spreadsheet F2 as "red", G2 as "blue", and H2 as "green"
figure 1
enter image description here
By checking the output of JSON.stringify(e), it seems that each property of objects become different parameters and are received as something like the following:
{
"queryString": "settingLink=settingLinkTest&albumLink=albumLinkTest&stepControl=stepControlTest&nav%5B0%5D%5Bstyle%5D=red&nav%5B0%5D%5Bcontent%5D=test&nav%5B1%5D%5Bstyle%5D=blue&nav%5B1%5D%5Bcontent%5D=test&nav%5B2%5D%5Bstyle%5D=green&nav%5B2%5D%5Bcontent%5D=test",
"contextPath": "",
"parameters": {
"nav[1][style]": [
"blue"
],
"nav[1][content]": [
"test"
],
"albumLink": [
"albumLinkTest"
],
"nav[2][style]": [
"green"
],
"settingLink": [
"settingLinkTest"
],
"nav[2][content]": [
"test"
],
"nav[0][style]": [
"red"
],
"stepControl": [
"stepControlTest"
],
"nav[0][content]": [
"test"
]
},
"contentLength": -1,
"parameter": {
"nav[2][content]": "test",
"nav[1][content]": "test",
"albumLink": "albumLinkTest",
"settingLink": "settingLinkTest",
"nav[0][style]": "red",
"stepControl": "stepControlTest",
"nav[0][content]": "test",
"nav[1][style]": "blue",
"nav[2][style]": "green"
}
}
Since the index of a particular nav and its properties become names of parameters, you can get their values by changing your doGet() to:
SheetName.getRange("F2").setValue(params["nav[0][style]"]);
SheetName.getRange("G2").setValue(params["nav[1][style]"]);
SheetName.getRange("H2").setValue(params["nav[2][style]"]);
Alternatively, as suggested in the comments of the question, you can stringify the nav object when sending it:
this.$http.get(appurl, {
params: {
settingLink: settingLink,
albumLink: albumLink,
stepControl: stepControl,
nav: JSON.stringify(nav)
}
}).then(response => {
console.log(response);
})
And then parsing when you receive it to use as you intended:
var nav = JSON.parse(params.nav);
SheetName.getRange("F2").setValue(nav[0].style);
SheetName.getRange("G2").setValue(nav[1].style);
SheetName.getRange("H2").setValue(nav[2].style);
This code below shows my attempt to show a jstree context menu only at level 1.
The menu shows at level one and selection of the menu items shows an alert.
The menu does not show at level 2 which is fine and what I want.
But, after selecting a level 2 node, then selecting a level 1 node the menu appears as it should, but selection of the menu items does nothing.
Any help appreciated.
fiddle: https://jsfiddle.net/NervousElk/4p5hqg0r/17/ fiddle
document.getElementById("gobtn").addEventListener("click", buildtree);
function buildtree()
{
$('#ttstafftree').jstree(
{
plugins: ["wholerow", "json_data", "ui", "themes", "sort", "state", "contextmenu"],
'core' :
{
"check_callback": true,
'data' :
[
{ "id" : "ajson1", "parent" : "#", "text" : "Root 1" },
{ "id" : "ajson1-1", "parent" : "ajson1", "text" : "a" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root 2" },
{ "id" : "ajson2-1", "parent" : "ajson2", "text" : "b" },
]
},
"contextmenu":
{
"items":
{
opt1:
{
label: "opt 1",
action: function(data)
{
alert('opt 1')
}
},
opt2:
{
label: "opt 2",
action: function(data)
{
alert('opt 2')
}
}
}
},
})
.on('show_contextmenu.jstree', function(e, reference, element)
{
if ( reference.node.parents.length != 1)
{
$('.vakata-context').remove();
}
});
}
You're removing the vakata-context element to hide the context menu for leaf nodes. Although I'm not too certain of this, to me it seems that this breaks the event handlers set on the context menu so they don't work anymore. Looking at the source code for the context menu, jsTree internally uses $.vakata.context.hide() to hide the tree. You could use that in your event handler for the show_contextmenu.jstree event.
.on('show_contextmenu.jstree', function (e, reference, element) {
if (reference.node.parents.length != 1) {
$.vakata.context.hide();
//$('.vakata-context').css('display',"none");
}
});
I get the result below from the url "https://api.myjson.com/bins/1f1pxv"
{
"categoria": "Graduação - Semipresenciais",
"cursos": [
{
"name": "Engenharia de Computação",
"tarefas": "1"
},
{
"name": "Engenharia de Computação",
"tarefas": "2"
},
{
"name": "Psicologia",
"tarefas": "4"
}
]
}
I use React Native and Axios to get the values
buscaCursosJson = () => {
axios.get("https://api.myjson.com/bins/1f1pxv").then(response => {
alert('x2: '+response.data.cursos.name)
alert('x1: '+response.data.categoria)
})
};
The alert 'x1' is showing correctly the result "Graduação - Semipresenciais", but the 'x2' alert is showing 'undefined' as a result.
How I can fix that?
I find how to fix the problem, I use the map function
response.data.cursos.map(data => alert(data.name))