How to fetching data JSON using react-native-dropdown? - react-native

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
}
]
}

Related

how to pass i18n data $t as prop to a component

in a normal way with out translation but i want to translate the two object array and bind into a component
<InfoNews
v-for="infonew in infonews"
:id="infonew.id"
:title="infonew.title"
:content="infonew.content"
/>
data() {
return {
infonews: [
{
id: "01",
title: "what we do",
content:"industke aecimen book. ",
},
{
id: "02",
title: "our mission",
content:"ggdddg",
},
],
};
Make infonews a computed property. The title and content of each should be the translation keys.
export default {
computed: {
infonews() {
return [
{
id: "01",
title: this.$t("what we do"),
content: this.$t("industke aecimen book"),
},
{
id: "02",
title: this.$t("our mission"),
content: this.$t("ggdddg"),
},
]
};
}
}

State object cannot re assign by payload objects in mutations

I have this state object, with default values
state() {
return {
projects: [
{ code: "01", name: "test" },
{ code: "01", name: "test" },
{ code: "01", name: "test" },
],
};
},
and I'm trying to replace it with payload that came from actions,
mutations: {
setProject(state,payload) {
state.projects = payload;
}
},
The problem is it doesn't replace the state.projects object when im trying to use console.log
i am using vuex 3.6.2 my payload is like this
[
{ code: "01", name: "Picture" },
{ code: "02", name: "Perfect" },
],
Try state being an object not a function. E.g.
const state = {
projects: [
{ code: "01", name: "test" },
{ code: "01", name: "test" },
{ code: "01", name: "test" },
],
}

Vue-multiselect update field using AJAX

Here is my Vue multiselect component:
<multiselect v-model="selectedcategoryitem"
:options="options"
:multiple="true"
:internal-search="false"
group-values="libs"
group-label="category"
:group-select="true"
placeholder="Type to search"
track-by="value"
label="name"
v-on:select="toggleSelected">
<span slot="noResult">Oops! No elements found. Consider changing the search query.</span>
</multiselect>
And data and method:
data: { selectGoalID: 0
, selectedcategoryitem: []
, queryData: []
, options: [
{
value: 1,
category: 'item1',
libs: [
{ value: "1_1", name: 'name1(E)' },
{ value: "1_2", name: 'name2(P)' },
{ value: "1_3", name: 'name3(T)' },
{ value: "1_4", name: 'name4(F)' },
{ value: "1_5", name: 'name5' },
]
},
{
value: 2,
category: 'item2',
libs: [
{ value: "2_1", name: 'name1' },
{ value: "2_2", name: 'name2' }
]
},
{
value: 3,
category: 'item3',
libs: [
{ value: "3_1", name: 'name1' },
{ value: "3_2", name: 'name2' },
{ value: "3_3", name: 'name3' },
{ value: "3_4", name: 'name4' },
{ value: "3_5", name: 'name5' },
]
},
}
, methods: {
UpdateType: function (goal_id, selectedTypes) {
return $.ajax({
method: "POST"
, url: "#Url.Action("UpdateType", "Predict")"
, data: {
_goal_id: goal_id,
_selectedTypes: selectedTypes
}
, success: function (result) {
if (result.code == "S") {
}
else {
alertResultModel(result);
}
},
error: function (xhr, ajaxOptions, thrownError) {
alertInfo(xhr.statusText);
}
});
}
, toggleSelected: function (value) {
if (value.length > 0) {
this.queryData = JSON.parse(JSON.stringify(value));
}
console.log(this.queryData);
this.UpdateType(this.selectGoalID, this.queryData).then(
function (result) {
if (result.code == "S") {
}
else {
alertResultModel(result);
}
}
, function () {
alertError("Error!!");
}
);
}
}
And when I selected single item, console log return: null,
When i selected multiple items console log return:
(2) [{…}, {…}, __ob__: Observer]
0: {__ob__: Observer}
1: {__ob__: Observer}
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
[[Prototype]]: Array
Question is:
Why first selected item is null, but v-model="selectedcategoryitem" selectedcategoryitem.length is 1.
How to convert value to JSON format send to Backend.
Step 1: Create an HTML template
<div id="app">
<multiselect
v-model="selectedcategoryitem"
:options="options"
:multiple="true"
:internal-search="false"
group-values="libs"
group-label="category"
:group-select="true"
placeholder="Type to search"
track-by="value"
label="name"
#input="onChange"
>
</multiselect>
<p>Selected Item: {{ selectedcategoryitem }}</p>
</div>
Step 2: Model data like,
data() {
return {
selectGoalID: 0,
selectedcategoryitem: [],
options: [
{
value: 1,
category: "item1",
libs: [
{ value: "1_1", name: "name1(E)" },
{ value: "1_2", name: "name2(P)" },
{ value: "1_3", name: "name3(T)" },
{ value: "1_4", name: "name4(F)" },
{ value: "1_5", name: "name5" },
],
},
{
value: 2,
category: "item2",
libs: [
{ value: "2_1", name: "name1" },
{ value: "2_2", name: "name2" },
],
},
{
value: 3,
category: "item3",
libs: [
{ value: "3_1", name: "name1" },
{ value: "3_2", name: "name2" },
{ value: "3_3", name: "name3" },
{ value: "3_4", name: "name4" },
{ value: "3_5", name: "name5" },
],
},
],
};
},
Step 3: Create an methods and call REST API call
methods: {
UpdateType: function (goal_id, selectedTypes) {
console.log("selectedTypes", selectedTypes);
return $.ajax({
method: "POST",
url: "#Url.Action('UpdateType', 'Predict')",
data: {
_goal_id: goal_id,
_selectedTypes: JSON.stringify(selectedTypes),
},
success: function (result) {
alert(result);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.statusText);
},
});
},
onChange() {
console.log("this.selectedcategoryitem", this.selectedcategoryitem);
this.UpdateType(this.selectGoalID, this.selectedcategoryitem).then(
function (result) {
alert(result);
},
function () {
alert("Error!!");
}
);
},
},
You can see the logs for selected items and AJAX call form data
DEMO Link

mongodb aggregation - setting the contents of array as input, while storing sibling keys

I'm in the middle of an aggregation pipeline when I have the following data passed from the previous step as input to a "count all leaves in all branches/trees/forests" as indicated in this question: Need guidance on mongo aggregate lookup to count subnodes in all child nodes for each node
{
forest_ranger: "bob",
some_other_data: {},
forests: [
{
forest_id: 'forestA',
trees: [
{
tree_id: 'treeA',
branches: [
{
branch_id: 'branchA',
}
]
}
]
}
],
}
I have that all working properly, but only if I'm reading directly from a collection.
My question is - how can I
a) save forest_ranger and some_other_data "for later"
b) and start the next stage by mapping forests as the array of
documents that are input to the "count all leaves"?
Note - I tried to get just (b) working for starters, but I can't seem to treat "forests" as an array so that the solution in the link above can do its magic.
Then- when that phase is done, extract what was stored in (a) to get the original format back with all the counts.
That is the main disadvantage of using $group. You have to explicitly carry forward every non participating fields using either $first or $last like this:
Get the test data with those additional fields from this new MongoPlayground link.
Check the updated query taken from the link:
db.Forests.aggregate([
{ $unwind: "$forests" },
{ $unwind: "$forests.trees" },
{ $unwind: "$forests.trees.branches" },
{
$lookup: {
from: "Leaves",
localField: "forests.trees.branches.branch_id",
foreignField: "branch_id",
as: "forests.trees.branches.leaves"
}
},
{
$addFields: {
"forests.trees.branches.leaf_count": { $size: "$forests.trees.branches.leaves" }
}
},
{
$project: { "forests.trees.branches.leaves": 0 }
},
{
$group: {
_id: {
forest_id: "$forests.forest_id",
tree_id: "$forests.trees.tree_id"
},
forest_ranger: { $first: "$forest_ranger" },
some_other_data: { $first: "$some_other_data" },
leaf_count: { $sum: "$forests.trees.branches.leaf_count" },
branches: { $push: "$forests.trees.branches" }
}
},
{
$group: {
_id: "$_id.forest_id",
forest_ranger: { $first: "$forest_ranger" },
some_other_data: { $first: "$some_other_data" },
leaf_count: { $sum: "$leaf_count" },
trees: {
$push: {
leaf_count: { $sum: "$leaf_count" },
tree_id: "$_id.tree_id",
branches: "$branches"
}
}
}
},
{
$group: {
_id: null,
forest_ranger: { $first: "$forest_ranger" },
some_other_data: { $first: "$some_other_data" },
leaf_count: { $sum: "$leaf_count" },
forests: {
$push: {
leaf_count: { $sum: "$leaf_count" },
forest_id: "$_id",
trees: "$trees"
}
}
}
},
{
$project: { _id: 0 }
}
])
Output:
{
"forest_ranger" : "bob",
"some_other_data" : {
"data" : "Dummy data"
},
"leaf_count" : 4,
"forests" : [
{
"leaf_count" : 3,
"forest_id" : "forestA",
"trees" : [
{
"leaf_count" : 1,
"tree_id" : "treeB",
"branches" : [
{
"branch_id" : "branchB",
"leaf_count" : 1
}
]
},
{
"leaf_count" : 2,
"tree_id" : "treeA",
"branches" : [
{
"branch_id" : "branchA",
"leaf_count" : 1
},
{
"branch_id" : "branchA1",
"leaf_count" : 1
},
{
"branch_id" : "branchA2",
"leaf_count" : 0
}
]
}
]
},
{
"leaf_count" : 1,
"forest_id" : "forestB",
"trees" : [
{
"leaf_count" : 0,
"tree_id" : "treeD",
"branches" : [
{
"branch_id" : "branchD",
"leaf_count" : 0
}
]
},
{
"leaf_count" : 1,
"tree_id" : "treeC",
"branches" : [
{
"branch_id" : "branchC",
"leaf_count" : 1
}
]
}
]
},
{
"leaf_count" : 0,
"forest_id" : "forestC",
"trees" : [
{
"leaf_count" : 0,
"tree_id" : "treeE",
"branches" : [
{
"branch_id" : "branchE",
"leaf_count" : 0
}
]
}
]
}
]
}

Curve Line Graphic and Jsonfile

I realized this curve line graph using d3 and nvd3:
d3.json('/Models/Scripts/test_data2.json', function(data) {
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart();
// chart.transitionDuration(500);
chart.xAxis
.tickFormat(d3.format(',f'));
chart.x2Axis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.y2Axis
.tickFormat(d3.format(',.2f'));
d3.select('#chart svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});
The question is, how should I write my json file to recognize different curves?
If I have the following json it doesn't work with two or more lines. I did several tries.
[{"CurveArray":[{
"Line1":[
{
"x":-52482.23046875,
"y":0.0
},
{
"x":-51380.384892578128,
"y":0.4
},
{
"x":-50278.539316406248,
"y":2
},
{
"x":-49176.693740234376,
"y":0.9
},
{
"x":-48074.848164062496,
"y":0.7
}
]},
"Line2":[
{
"x":-52482.23046875,
"y":0.0
},
{
"x":-51380.384892578128,
"y":0.4
},
{
"x":-50278.539316406248,
"y":2
},
{
"x":-49176.693740234376,
"y":0.9
},
{
"x":-48074.848164062496,
"y":0.7
}
]}
]}]
I tried to modify so:
It doesn't work again.
[
{
key: "Line1",
value: [
{
"x":-52482.23046875,
"y":0.0
},
{
"x":-51380.384892578128,
"y":0.4
},
{
"x":-50278.539316406248,
"y":2
},
{
"x":-49176.693740234376,
"y":0.9
},
{
"x":-48074.848164062496,
"y":0.7
}
]
},
{
key: "Line2",
value: [
{
"x":-50000,
"y":0.0
},
{
"x":-59000,
"y":0.4
},
{
"x":-48000,
"y":2
},
{
"x":-49100,
"y":0.9
},
{
"x":-49800,
"y":0.7
}
]
}
]