Display fetch data in accordion React Native - javascript

I'm using an accordion list from native base, and all i'm displaying rightnow is:
const dataArray = [
{ title: "Desc", content: "n" },
{ title: "education1", content: "n" },
{ title: "education2", content: "n" },
{ title: "Price", content: 'n' },
{ title: "place", content: "n" },
{ title: "paiement", content: "n" }
];
...
<Content padder>
<Accordion dataArray={dataArray} expanded={0} />
</Content>
so i fetched some data from a database and i want to diplay the content of every array inside the corresponding accordion pad, here is the format of the data:
Array [
Object {
"code": false,
"id": 10,
"name": "medecin_mediclic",
"presentation": false,
"profession": "Medecin",
"specialite": "Généraliste",
},
Object {
"education": Array [],
},
Object {
"education": Array [],
},
Object {
"price": Array [],
},
Object {
"place": Array [],
},
Object {
"paiement": Array [],
},
]
for example, in my accordion list first pad is "Desc" should contain:
"medecin_mediclic",
false,
"Medecin",
"Généraliste",
and so on.if the array is null then nothing comes out
anyone have any idea how to do it?

Related

How can I extract innermost value from an array of nested JSON data using their keys?

The following data structure is an array and each array element being an object with keys:
this.objectImWorkingWith = [
{
"1306": {
"id": 6460,
"data": "Process",
},
"1307": {
"id": 6461,
"data": "1287",
},
"1309”: {
"id": 6462,
"data": “2748”,
}
},
{
"1306": {
"id": 6465,
"data": "Product",
},
"1307": {
"id": 6466,
"data": "2574",
},
"1309”: {
"id": 6263,
"data": “3752”,
}
},
{
"1306": {
"id": 6470,
"data": "Research",
},
"1307": {
"id": 6471,
"data": "3861",
},
"1307": {
"id": 6472,
"data": “2248”,
}
}
]
Each element within the array has multiple objects within it and I want to retrieve the value of 'data' for each object within the parent object whilst retaining the structure. Meaning that I want to keep, for example, Process, 1287 and 2748 grouped together and so on.
So in summary I am aiming to get the value of "data" for each object within the array but keep all values of data that are in the same object in the array associated to each other.
I've tried
Object(this.allRelevantData.map(a=>a.data))
however it yields
[undefined, undefined, undefined]
You could try this:
var objectImWorkingWith = [
{
1306: {
id: 6460,
data: "Process",
},
1307: {
id: 6461,
data: "1287",
},
1309: {
id: 6462,
data: "2748",
},
},
{
1306: {
id: 6465,
data: "Product",
},
1307: {
id: 6466,
data: "2574",
},
1309: {
id: 6263,
data: "3752",
},
},
{
1306: {
id: 6470,
data: "Research",
},
1307: {
id: 6471,
data: "3861",
},
1307: {
id: 6472,
data: "2248",
},
},
];
const result = objectImWorkingWith.map((object) => {
const data = [];
for (var key of Object.keys(object)) {
data.push(object[key].data);
}
return data;
});
variable result will contain:
[["Process", "1287", "2748"],
["Product", "2574", "3752"],...]

Use fields from data() as chart data - FusionCharts

I want to show simple charts using Vue 2 and FusionCharts. I'm fetching my data from firebase and I run some calculations before I can fetch this to FusionCharts component. As these calculations are performed the result is stored in values in Vue's data function. I was following this link here. Problem is it defines chartData outside the export default. My question is how do i use values in my data function to populate my chart? My code looks something like this:
export default {
name: "dash",
data: () => ({
users: [],
total: 0,
activeCount: 0,
maleCount: 0,
femaleCount: 0,
newUssrs: 0
}),
computed: {
chartData: [
{
label: "Male",
value: this.maleCount
},
{
label: "Female",
value: this.femaleCount
}
],
dataSrc: {
chart: {
caption: "Total User Count",
subcaption: "",
xaxisname: "Gender",
yaxisname: "User counts",
numbersuffix: "",
theme: "fusion"
},
data: this.chartData
}
},
mounted() {
this.getData();
}
};
computed properties need to be functions which return the computed data. Like:
computed: {
chartData() {
return [
{
label: "Male",
value: this.maleCount
},
{
label: "Female",
value: this.femaleCount
}
]
},
dataSrc() {
return {
chart: {
caption: "Total User Count",
subcaption: "",
xaxisname: "Gender",
yaxisname: "User counts",
numbersuffix: "",
theme: "fusion"
},
data: this.chartData
}
}
},

Pushing to array doesn't trigger vue's reactivity

I already know that editing object within an array doesn't work for vue.js due to its limited capability and base on what I read using vue.set should solve this problem easily but I am having a hard time making it work.
this is my sample data. The parent object is called resource and inside resource there are power_generator_groups , inside the power_generator_groups are power_generators.
{
"id": 5,
"bg_member_id": 1,
"code": "G0633",
"name": "namex1",
"power_generator_groups": [
{
"id": 1,
"resource_id": 5,
"code": "GC033",
"power_generators": [
{
"id": 1,
"power_generator_group_id": 1,
"code": "XXXXX",
"name": "test",
"contract_number": "00000003",
"supply_max": 1000,
},
{
"id": 2,
"power_generator_group_id": 1,
"code": "XXXXX",
"name": "test",
"contract_number": "00000003",
"supply_max": 1000,
},
{
"id": 3,
"power_generator_group_id": 1,
"code": "XXXXX",
"name": "test",
"contract_number": "00000003",
"supply_max": 1000,
}
]
},
{
"id": 2,
"resource_id": 5,
"code": "GC033",
"contract_number": "065C001",
"power_generators": [
{
"id": 4,
"power_generator_group_id": 2,
"code": "XXXXX",
"name": "test",
"contract_number": "00000003",
"supply_max": 1000,
}
]
}
]
}
and this is my vue file
<template lang="pug">
.wrapper
.animated.fadeIn
b-container(fluid='')
b-row.my-1
b-col(sm='3')
label(:for='`type-key`') companyName
b-col(sm='9')
b-form-select(v-model='item.bg_member_id' :options="companyList")
b-col(sm='3')
label(:for='`type-key`') code
b-col(sm='9')
b-form-input(v-model='item.code')
b-button(size='sm', #click='addPowerGeneratorGroup', variant="primary")
| Add power_generator_group
template(v-for='(group, group_index) in item.power_generator_groups')
b-card(
header-tag="header"
footer-tag="footer"
)
div(slot="header")
i.fa.fa-align-justify
strong power_generator_groups
button.btn.btn-default.btn-sm(type='button' #click='deletePowerGeneratorGroup(group_index)')
span.fa.fa-trash-o
div
b-row.my-1
b-col(sm='3')
label(:for='`type-key`')
| code
b-col(sm='9')
b-form-input(v-model='group.code')
b-col(sm='3')
label(:for='`type-key`') group name
b-col(sm='9')
b-form-input(v-model='group.name')
b-col(sm='3')
label(:for='`type-key`') contract number
b-col(sm='9')
b-form-input(v-model='group.contract_number')
b-container.bv-example-row(fluid='')
b-button(size='sm', #click='addPowerGenerator(group_index)', variant="primary")
| add power_generator
b-card(
header-tag="header"
footer-tag="footer"
)
div(slot="header")
i.fa.fa-align-justify
strong power_generators
b-table(small v-bind:item="group.power_generators" v-bind:fields="fields" fixed responsive)
template(v-for="field in fields" :slot="field.key" slot-scope="contract")
template(v-if="field.key == 'actions'")
b-button(size='sm', #click='deletePowerGenerator(group_index, contract.index)', variant="primary")
| Del
template(v-else)
b-form-input(:type='types[field.key]' v-model = 'contract.item[field.key]')
b-button(size='sm', #click='save', variant="primary")
| Save
</template>
<script>
import Vue from 'vue';
export default {
props: {
item: {
type: Object,
required: true,
default: () => {
}
},
companyList: Array
},
data() {
return {
companyId: null,
code: null,
name: null,
contract_number: null,
fields: [
{key: 'actions', label: '' },
{key: 'code', label: 'code', sortable: true, sortDirection: 'desc'},
{key: 'name', label: 'name', sortable: true, class: 'text-center'},
{key: 'contract_number', label: 'contractNo'},
{key: 'supply_max', label: 'maxunit'}
],
types: {
code: 'text',
name: 'text',
contract_number: 'text',
supply_max: 'number'
},
items:
{}
}
},
mounted() {
},
computed: {},
methods: {
addPowerGenerator(index) {
console.log(index)
console.log(this.item)
const pgg = this.item.power_generator_groups[index];
const pgs = pgg.power_generators || Vue.set(pgg, 'power_generators', []);
pgs.push(
{
"code": "",
"name": "",
"contract_number": "",
"supply_max": "",
}
)
},
addPowerGeneratorGroup() {
const pggs = this.item.power_generator_groups || Vue.set(this.item, 'power_generator_groups', []);
pggs.push(
{
"resource_id": this.item.id,
"name": "",
"code": "",
"contract_number": "",
"power_generators": []
}
)
},
deletePowerGenerator(group_index, field_index) {
this.item.power_generator_groups[group_index].power_generators.splice(field_index, 1);
},
deletePowerGeneratorGroup(group_index) {
this.item.power_generator_groups.splice(group_index, 1);
},
save: function () {
this.$parent.save(this.item)
}
}
}
</script>
You'll need Vue.set only if you have power_generator_groups that have no power_generators property, since Vue can't detect when you add it otherwise.
Assuming there are no problems with your template (you didn't show it), change your addPowerGenerator method:
addPowerGenerator(index) {
console.log(index)
console.log(this.item)
const pgg = this.item.power_generator_groups[index];
const pgs = pgg.power_generators || Vue.set(pgg, 'power_generators', []);
pgs.push(
{
"code": "",
"name": "",
"contract_number": "",
"supply_max": "",
}
)
}
Vue.set returns the property you just created which is how pgs contains the proper reference in that case.
Do the same thing for the new method you edited in:
addPowerGeneratorGroup() {
const pggs = this.item.power_generator_groups || Vue.set(this.item, 'power_generator_groups', []);
pggs.push(
{
"resource_id": this.item.id,
"name": "",
"code": "",
"contract_number": "",
"power_generators": []
}
)
}
You can see a mockup here where I've assumed this.item refers to the resource itself. I included a 3rd group which has no power_generators property for testing.

Meteor cross collection arrays

I am trying to pull an array from a different collection using collection2. I have been able to do this with objects using the following example for users:
users: {
type: String,
label: "Inspector",
optional: true,
autoform: {
firstOption: 'Choose an Inspector',
options: function() {
return Meteor.users.find({}, {
sort: {
profile: 1,
firstName: 1
}
}).map(function(c) {
return {
label: c.profile.firstName + " " + c.profile.lastName,
value: c._id
};
});
}
}
},
I would like to do the same but for an array of objects. Here is what the source data looks like:
{
"_id": "xDkso4FXHt63K7evG",
"AboveGroundSections": [{
"sectionName": "one"
}, {
"sectionName": "two"
}],
"AboveGroundItems": [{
"itemSection": "one",
"itemDescription": "dfgsdfg",
"itemCode": "dsfgsdg"
}, {
"itemSection": "two",
"itemDescription": "sdfgsdfg",
"itemCode": "sdfgsdgfsd"
}]
}
Here is what my function looks like:
agSection: {
type: String,
optional: true,
autoform: {
firstOption: 'Select A Section Type',
options: function() {
return TemplateData.find({}, {
sort: {
AboveGroundSections: 1,
sectionName: [0]
}
}).map(function(c) {
return {
label: c.AboveGroundSections.sectionName,
value: c.AboveGroundSections.sectionName
}
});
}
}
},
I know this, it's just not pulling the data for me. I am sure, I am just missing something small. I am trying to pull all objects within the AboveGroundSection array.
Your .map() is iterating over the set of documents but not over the arrays inside each document. Also I don't think your sorting is going to work the way you hope because of the inner nesting.
Try:
agSection: {
type: String,
optional: true,
autoform: {
firstOption: 'Select A Section Type',
options() {
let opt = [];
TemplateData.find().forEach(c => {
c.AboveGroundSections.forEach(s => { opt.push(s.sectionName) });
});
return opt.sort().map(o => { return { label: o, value: o } });
}
}
},
Also if your AboveGroundSections array only has a single key per element then you can simplify:
"AboveGroundSections": [
{ "sectionName": "one" },
{ "sectionName": "two" }
]
To:
"AboveGroundSections": [
"one",
"two"
]

Convert a list of objects to a json tree structure

I have a list which needs to be converted to a json format.
This..
var sourceList = [
{ title: "item-1", indent: "0" },
{ title: "item-2", indent: "0" },
{ title: "item-3", indent: "0", folder: true },
{ title: "item-4", indent: "1" },
{ title: "item-5", indent: "1", folder: true },
{ title: "item-6", indent: "2" },
{ title: "item-7", indent: "2" },
{ title: "item-8", indent: "0" }
];
to this..
var targetJson = [
{ title: "item-1" },
{ title: "item-2" },
{ title: "item-3", folder: true, children: [
{ title: "item-4" },
{ title: "item-5", folder: true, children: [
{ title: "item-6" },
{ title: "item-7" }
]},
]},
{ title: "item-8" }
];
so that the result can be used to init a tree structure like below.
item-1
item-2
item-3
.. item-4
.. item-5
.... item-6
.... item-7
item-8
The 'indent' property of each source object determines its position relative to the previous object.
Like if an object has indent greater than previous one, then it will be taken as child of previous and if it has indent same as previous then it is taken as sibling of the previous.
So children property and folder property will occur for nodes which has sub-items.
One of the challenges would be 'item-8' which is at level-0 than the previous one at level-2.
Need a solution, preferably in javascript.
I kept a mapping between indentation and the element to add children to:
// test data
var sourceList = [
{ title: "item-1", indent: "0" },
{ title: "item-2", indent: "0" },
{ title: "item-3", indent: "0", folder: true },
{ title: "item-4", indent: "1" },
{ title: "item-5", indent: "1", folder: true },
{ title: "item-6", indent: "2" },
{ title: "item-7", indent: "2" },
{ title: "item-8", indent: "0" }
];
// init
var targetJson = [];
var roots = { 0 : targetJson};
// actual code:
sourceList.forEach(function(item){
if (!roots[item.indent].splice) {
roots[item.indent] = roots[item.indent].children = [];
}
roots[item.indent].push(item);
if (item.folder) {
roots[+item.indent+1] = item;
}
});
// output
console.log(targetJson);
PS: i kept the indent property in the object so you can check the results. Feel free to remove it after the item is added. It is inconsequential.

Categories