i am getting array of objects from api.
The data looks like this.
Array [
Object {
"code": 230,
"name": "טרגט",
"themeColor": "#009fe8",
},
Object {
"code": 270,
"name": "קוסל",
"themeColor": "#9c3ab4",
},
Object {
"code": 465,
"name": "מעיין",
"themeColor": "#0bb694",
},
Object {
"code": 485,
"name": "מעיין תיכונים",
"themeColor": "#009fe8",
},
Object {
"code": 700,
"name": "משרד החינוך",
"themeColor": "#9c3ab4",
},
Object {
"code": 701,
"name": "מ.החינוך אולפני",
"themeColor": "#0bb694",
},
Object {
"code": 702,
"name": "חינוך התישבותי",
"themeColor": "#009fe8",
},
Object {
"code": 984,
"name": "לא לגעת -חברת הדגמה ",
"themeColor": "#9c3ab4",
},
]
i want to add a dropdown which contain items as array of objects "name" value from
api.
i am using RNPickerSelect from "react-native-picker-select";
const [selectedComp, setSelectedComp] = useState("");
const changeLanguage = (value) => {
setSelectedComp(value);
};
<RNPickerSelect
placeholder={{ label: i18n.t("SET_LANGUAGE") }}
style={pickerSelectStyles}
onValueChange={(value) => changeLanguage(value)}
items={companyName}
doneText={"בוצע"}
value={selectedComp}
useNativeAndroidPickerStyle={false}
fixAndroidTouchableBug={true}
/>
i want the names for the dropdown list coming from array of object list like below one.
טרגט
קוסל
מעיין
מעיין תיכונים
משרד החינוך
מ.החינוך אולפני
חינוך התישבותי
לא לגעת -חברת הדגמה
How can i add name from array list for dropdown list?
According to the official react-native-picker-select documentation, the data you want to display in the dropdown, should have the keyword label, but you are trying to display name keyword.
The items for the component to render
Each item should be in the following format: {label: 'Orange', value: 'orange', key: 'orange', color: 'orange', inputLabel:
'Orange!'}
label and value are required
Something like this:
<RNPickerSelect
onValueChange={(value) => console.log(value)}
useNativeAndroidPickerStyle={false}
placeholder={{ label: "Select your favourite language", value: null }}
items={[
{ label: "JavaScript", value: "JavaScript" },
{ label: "TypeStript", value: "TypeStript" },
{ label: "Python", value: "Python" },
{ label: "Java", value: "Java" },
{ label: "C++", value: "C++" },
{ label: "C", value: "C" },
]}
/>
Related
I have an object of object array in json format.I want to remove one object form this object array using vuejs.
vuejs
export default {
components: { leftmenu, countDown, timer, Header },
data() {
return {
this.orders = {"data":{"175":{"details":[{"order_id":175,"item_id":1,"item_name":"pizza"},{"order_id":175,"item_id":2,"item_name":"burger"}]},"173":{"details":[{"order_id":175,"item_id":1,"item_name":"pizza"}]}}}
};
},
}
I have tried to remove object which have key 175 using below code.But did not work.
const filtersList = Object.keys(this.orders.data).filter(
(element) => element !== index
);
this.orders = filerslist
You can use the delete keyword (documentation here) to remove keys from objects
const orders = {
"data": {
"175": {
"details": [{
"order_id": 175,
"item_id": 1,
"item_name": "pizza"
}, {
"order_id": 175,
"item_id": 2,
"item_name": "burger"
}]
},
"173": {
"details": [{
"order_id": 175,
"item_id": 1,
"item_name": "pizza"
}]
}
}
}
delete orders.data["175"]
console.log(orders)
I would just like to use a FlatList to list annotation and editedAnnotation, but I can't list both. As shown below, it is listing annotation only.
My state and API:
const [cards, setCards] = useState([]);
useEffect(() => {
async function loadCards() {
const response = await api.get('annotation');
setCards(response.data);
}
loadCards();
}, []);
My list:
<FlatList
data={cards.Annotation}
keyExtractor={call => String(call.id)}
renderItem={({item: call}) => (
<Card {...call}/>
)}
/>
API Return:
{
"Annotation": [
{
"id": 1,
"dateIn": "2019-12-13T18:54:39.0248433+00:00",
"message": "test1",
"statusId": 1,
"symbolId": 5,
"symbol": {
"id": 5,
"status": "start",
}
},
{
"id": 2,
"dateIn": "2019-12-13T14:23:10.6056632+00:00",
"message": "test2",
"statusId": 1,
"symbolId": 2,
"symbol": {
"id": 2,
"status": "end",
}
}
],
"editedAnnotation": [
{
"Annotation": {
"id": 3,
"dateIn": "2019-12-13T19:28:10.6056632+00:00",
"message": "test3",
"statusId": 1,
"symbolId": 2,
"symbol": {
"id": 2,
"status": "start",
}
}
},
"id": 1,
"dateEdit": "2019-12-13T22:27:23.6273816+00:00",
"newMessage": "test3 updated",
"annotationId": 3
}
]
}
You could use spread operator to mix both lists into only one list.
<FlatList
data={[...(cards.Annotation || []), ...(cards.editedAnnotation || [])]}
keyExtractor={call => String(call.id)}
renderItem={({item: call}) => (
<Card {...call}/>
)}
/>
Or you could try using SectionList.
I am using RNPickerSelect from the library "react-native-picker-select", but cant seem to display the selection by mapping objects of an array stored in one of my state.
I tried using the same way to map objects of an array like how I would when I'm trying to display the data by wrapping in simple components but I'm getting an "Type Error. undefined is not an object (evaluating this.state.selectedItem.label".
I have declared and initialize bankResponseArray : [] within my react native class. And the API call to fetch data was successful, the state "bankResponseArray" was inserted with the data of
[
Object {
"__v": 0,
"_id": "5cb411e06f34961204003b79",
"bank_code": "RHB",
"country": "5cb04a7e23479e39e495f2b6",
"created_date": "2019-04-15T05:08:48.769Z",
"name": "RHB",
"status": true,
},
Object {
"__v": 0,
"_id": "5cb42d6635ab9132e0e0b994",
"bank_code": "Maybank",
"country": "5cb04a7e23479e39e495f2b6",
"created_date": "2019-04-15T07:06:14.701Z",
"name": "Maybank",
"status": true,
},
Object {
"__v": 0,
"_id": "5cd4e8b0c4022833942eafe0",
"bank_code": "HongLeong",
"country": "5cb04a7e23479e39e495f2b6",
"created_date": "2019-05-10T02:57:52.130Z",
"name": "HongLeong",
"status": true,
},
Object {
"__v": 0,
"_id": "5cd4ee47c4022833942eafe2",
"bank_code": "testbankcode",
"country": "5cbfc9c99b7d064464592948",
"created_date": "2019-05-10T03:21:43.534Z",
"name": "testbank",
"status": true,
},
]
And below is how my RNPickerSelect component looks like and how I'm trying to map the data from "bankResponseArray" :-
<RNPickerSelect
placeholder={{}}
useNativeAndroidPickerStyle={false}
items={this.state.bankResponseArray.map(obj =>
[{
label: obj.name,
value: obj._id,
color: "rgba(77,38,22,1)"
}]
)}
onValueChange={(value, index) => {
this.setState({
bankID: value
});
}}
onClose={() => {
// this._changeGender()
}}
style={{ ...pickerSelectStyles }}
value={this.state.businessType}
ref={el => {
this.inputRefs.picker = el;
}}
hideIcon={Platform.OS === "ios" ? false : true}
doneText={translate("common_done")}
// disabled={!canSubmit}
/>
The expected results were to have the RNPickerSelect display 4 selections which are "RHB, Maybank, HongLeong, testbank". But currently the way I'm trying to map my array to the RNPickerSelect is getting the error of "Type Error. undefined is not an object (evaluating this.state.selectedItem.label".
You should to return an object directly and not an array.
You can use like this:
items={this.state.bankResponseArray.map(obj => (
{
key: obj._id,
label: obj.name,
value: obj._id,
color: "rgba(77,38,22,1)",
}))}
This is my steps:
The Json code:
"features": [
{
"name": "size",
"selected": null,
"values": [
{
"value": "40",
"label": "40",
},
{
"value": "41",
"label": "41",
}
]
},
{
"label": "color",
"selected": "gray",
"values": [
{
"value": "gray",
"label": "gray"
},
{
"value": "black",
"label": "black",
}
]
}
]
Step2: define state
constructor(props) {
super(props);
this.state ={selectedDropDownValue:[]};
}
step3:
main render:
render{
return(
{this.printPickers()}
);
}
and
printPickers(){
const listItems = data.map((obj,index) =>
<Item picker key={'mykey1' + index}>
<Picker
selectedValue={(this.state.selectedDropDownValue[obj.label]) ?this.state.selectedDropDownValue[obj.label] : obj.selected}
onValueChange={(itemValue, itemIndex, itemName) =>this.pickerChange(itemIndex,itemValue,obj.name)}
>
{
obj1.values.map( (v)=>{
return <Picker.Item key={'mykey2' + index} label={v.label} value={v.value} />
})
}
</Picker>
</Item>
);
return (<View>{listItems}</View>);
}
and finally:
pickerChange(itemIndex,itemValue,itemName){
this.setState({
selectedDropDownValue: Object.assign(this.state.selectedDropDownValue, {[itemName]: itemValue})
});
}
My problem I can not change options of each pickers by touching them but with console.log(this.state.selectedDropDownValue), I get right data.
My problem I can not change options of each pickers by touching them but with console.log(this.state.selectedDropDownValue), I get right data.
There is some mismatch in json data. Either both should have a key label or name.
So suppose both items have key as label then you need to update your pickerChange function call like this:
this.pickerChange(itemIndex,itemValue,obj.label)
I want to fetching data from JSON using Dropdown lib,
but I can't display these JSON.
Here's the code I have tried:
this.state = {"diagnosis": {
"type": [
"Oncology",
"Hip And Knee"
],
"kode": [
"123",
"321",
"3232",
"1231"
],
"PrimaryCat": [
"contoh1",
"contoh2",
"contoh3"
],
"Location": [
"jakarta",
"bogor",
"depok",
"tangerang",
"bekasi"
],
"Encountrace": [
"kga",
"tau",
"isi",
"menunya"
],
"fracture": [
"ini",
"juga",
"kaga",
"tau",
"isinya"
],
"healing": [
"yang",
"pasti",
"penyembuhan"
]
}}
render() {
let data = [{
value: 'Banana',
}, {
value: 'Mango',
}, {
value: 'Pear',
}];
return (
<View>
<Dropdown
label="testing"
data={this.state.diagnosis.type}
/>
</View>
);
}
}
with above code, the dropdown just displaying two rows of type, but the name of oncology or hip and knee doesn't show,
here's the example screen:
Am I doing something wrong?
This will work if you change your json in following format,
this.state = {"diagnosis": {
"type": [
{
value: "Oncology",
}, {
value: "Hip And Knee"
}
],
rest of the formats will be as above.
If you do not want to change the format of your json then, you have to do minor changes in your react-native-material-dropdown code,
Please go to this path,
react-native-material-dropdown->src->components->dropdown->index.js
Please do some changes in index.js, change your valueExtractor function like this way,
valueExtractor: ( value = {}, index) => value,
Hope it helps to you.
try following.
{"diagnosis": {
"type": [
{
value: "Oncology"
},
{
value: "Hip And Knee
}
],
"kode": [
{
value: "123"
},
{
value: "321"
},
{
value: "3232"
},
{
value: "1231
}
],
"PrimaryCat": [
{
value: "contoh1"
},
{
value: "contoh2"
},
{
value: "contoh3
}
],
"Location": [
{
value: "jakarta"
},
{
value: "bogor"
},
{
value: "depok"
},
{
value: "tangerang"
},
{
value: "bekasi
}
],
"Encountrace": [
{
value: "kga"
},
{
value: "tau"
},
{
value: "isi"
},
{
value: "menunya
}
],
"fracture": [
{
value: "ini"
},
{
value: "juga"
},
{
value: "kaga"
},
{
value: "tau"
},
{
value: "isinya
}
],
"healing": [
{
value: "yang"
},
{
value: "pasti"
},
{
value: "penyembuhan
}
]
}