Populate data in DropDown box using sapui5 - json

var oItemsData = {
items: [
{"key" : "City1", "text" : "India"},
{"key" : "City2", "text" : "America"},
{"key" : "City3", "text" : "Germany"},
{"key" : "City4", "text" : "France"}
]
};
var oItemsModel = new sap.ui.model.json.JSONModel(oItemsData);
sap.ui.getCore().setModel(oItemsModel, "items");
new sap.ui.commons.Label({text:"FirstOne"}),
new sap.ui.commons.DropdownBox({value:"",required: true,
items: {
path: "items>/items",
template: new sap.ui.core.ListItem({
text: { path: "items>text" }//how to filter
})
}
}),
new sap.ui.commons.Label({text:"SecondOne"}),
new sap.ui.commons.DropdownBox({value:"",required: true,
items: {
//populate on the basis of 1st one's input
})
}
})
This is working fine with the above json data.
But I faced problem when my json data looks like below :
{
"CountryList" : [
{
"key" : "City1", "text" : "India"
}, {
"key" : "City2", "text" : "America"
}, {
"key" : "City3", "text" : "Germany"
}, {
"key" : "City4", "text" : "France"
}
]
}
I attempted this below code :
var oItemsModel = new sap.ui.model.json.JSONModel();
oItemsModel.loadData("json/countryList.json");
sap.ui.getCore().setModel(oItemsModel, "CountryList");
new sap.ui.commons.DropdownBox("Cities", {
selectedItemId : "{CountryList>/CountryList/0/callingfrom}",
items: {
path: "items>/CountryList",
template: new sap.ui.core.ListItem({
key: {path: "items>key"},
text: {path: "items>text"}
})
},
})
But not working.
How to build data in dropdown box when Json format like above.

i am guessing here but all you have done is change the aggregation name from "items" to "CountryList"
therefore try referencing the new name
new sap.ui.commons.DropdownBox({value:"",required: true,
items: {
path: "items>/CountryList", // >> here
template: new sap.ui.core.ListItem({
text: { path: "items>text" }//how to filter
})
}
}),

Solution of the above problem :
var oItemsModel = new sap.ui.model.json.JSONModel();
oItemsModel.loadData("json/countryList.json");
sap.ui.getCore().setModel(oItemsModel, "CountryList");
new sap.ui.commons.DropdownBox("Cities", {
selectedItemId : "{CountryList>/CountryList/0/callingfrom}",
items: {
path: "CountryList>/CountryList",
template: new sap.ui.core.ListItem({
key: {path: "CountryList>key"},
text: {path: "CountryList>text"}
})
},
})

Related

iterating objects as array of objects sent through postman tool and saving in db

this is the value i'm sending through postman tool
{
"name" :[
{
"first_name" : "antony",
"second_name" : "grijan"
},{
"first_name" : "suresh",
"second_name" : "muthu"
}],
"allergy" : [
{
"condition" : "headache"
},
{
"condition" : "toothache"
}],
"communication" : [
{
"address" : "no 21 big street",
"phone" : "84"
},
{
"address" : "no 43 small street",
"phone" :"87"
}]
}
I got the value in my control layer and i'm trying to save it in my mongodb using mongoose, my model code is
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var patientSchema = new Schema({
name: {
first_name : { type : String, default : ''},
second_name : { type : String, default : ''}
},
allergy : {
condition : {type : String, default : ''}
},
communication : {
address : {type : String, default : ''},
phone : {type : String, default : ''}
}
});
var patients = mongoose.model('Patients',patientSchema);
module.exports = patients;
My service layer code where i'm iterating is
var addDao = require('../dao/dao');
var async = require('async');
module.exports.addPatient = function(detail,callback) {
async.mapValues(detail,function(value,key,callback){
addDao.addPatient(value,function(data){
console.log(data);
console.log("calling");
callback(null, data);
})
}, function(err, result) {
// result is now a map of results for each key
console.log("inside func",result);
callback(result);
}
);
}
I have a console.log() in my service layer but it gives me only empty values, i think there is something wrong either with my model code or my iteration in my service layer!

saving in the database variable as ObjectID() MongoDB, NodeJS

I created function which is adding people_id inside array of given card. But there is problem that inserted id is always not as an objectId() where I just need it to be saved as objectId.
When id is added to array i I'm sending whole variable board JSON to nodejs API where is executed function findOneAndUpdate. And here is problem because after saved this arrays is not objectID in Author. Can someone tell me how to make it?
JSON board
{
"_id" : ObjectId("59e096a7622a3825ac24f343"),
"name" : "1",
"users" : [
ObjectId("59cd114cea98d9326ca1c421")
],
"lists" : [
{
"list" : "1",
"cards" : [
{
"name" : "2",
"Author" : [
"59df60fb6fad6224f4f9f22d",
"59df60fb6fad6224f4f9f22d",
"59df60fb6fad6224f4f9f22e"
]
},
{
"name" : "3",
"Author" : []
}
]
},
{
"list" : "fea",
"cards" : [
{
"name" : "card",
"Author" : []
}
]
}
],
"__v" : 0 }
Router:
router.post('/add/member', function (req, res, next) {
console.log(req.body)
Board.findOneAndUpdate({ _id: req.body._id },
{
$set: {
lists : req.body.lists
}
},
{
upsert: true
},
((cards) => {
res.send(cards)
})
)
});
model:
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var BoardSchema = new Schema({
name: { type: String, maxlength: 20 },
lists : { type: Array },
users : [{ type : Schema.Types.ObjectId, ref: 'User' }],
});
module.exports = mongoose.model('Board', BoardSchema);
And here is function with adding poeple
$scope.addMemberToCard = (indexList, indexCard, member) => {
$scope.board.lists[indexList].cards[indexCard].Author.push(member);
console.log( $scope.board.lists[indexList].cards[indexCard].Author)
return ApiService.staff.addMemberToCard($scope.board).then(function () {
})
}
You could use the mongoose Types ObjectID method and then transform the string sent into an ObjectID.
const id = new new mongoose.Types.ObjectId(Author);

ExtJS Create Multiple Rows in Gird When Using Nested JSON

I am using Ext JS 6, trying to get a grid to have a row for each area, country, and city. I have no control over my backend and the format of my JSON (see below). I think I have my store correct (see below). I am wondering what I need to do in order to display a record for each nested item in the grid. Ext JS is determined to only have one record in this grid. My real question is what should my model look like?
JSON
{
"locations" : [
{
"type" : "area",
"name" : "Middle East",
"country" : [
{
"type" : "country",
"name" : "Afghanistan",
"city": [
{
"type" : "city",
"name" : "Bagram",
"data" : [
{
"data1" : 5,
"data2" : 10
},
{
"data1" : 2,
"data2" : 9
}
]
},
{
"type" : "city",
"name" : "Kabul",
"data" : [
{
"data1" : 3,
"data2" : 7
},
{
"data1" : 6,
"data2" : 2
}
]
}
]
}
]
}
]
}
Store
Ext.define('App.store.Locations', {
extend: 'Ext.data.Store',
model: 'App.model.Location',
proxy: {
type: 'ajax',
url: 'data/location.json',
reader: {
type: 'json',
rootProperty: 'locations'
}
},
autoLoad: true
});
I think you have to use Ext.data.reader.Reader.transform(), like this:
Ext.define('App.store.Locations', {
extend: 'Ext.data.Store',
model: 'App.model.Location',
proxy: {
type: 'ajax',
url: 'data/location.json',
reader: {
type: 'json',
rootProperty: 'locations',
transform: {
fn: function(rawData) {
//Your parse data logic here
var data = [],
locationTypes = ['area', 'country', 'city'],
parseData = function(dataPart) {
data.push({
type: dataPart['type'],
name: dataPart['name']
});
for(var i = 0; i < locationTypes.length; ++i) {
if(Object.prototype.hasOwnProperty.call(dataPart, locationTypes[i])) {
for(var j = 0; j < dataPart[locationTypes[i]].length; ++j) {
parseData(dataPart[locationTypes[i]][j]);
}
}
}
};
for(var i = 0; i < rawData.length; ++i) {
parseData(rawData['locations'][i]);
}
return (data);
}
}
}
},
autoLoad: true
});
Check this working fiddle

Using json data how to create form in sencha

I want to read json data from file - content of the json file shown below
{
"form": {
"fields" : [
{
"field":"textfield",
"name": "username",
"constrain": "5-10",
"value": ""
},
{
"field":"textfield",
"name": "password",
"constrain": "5-10",
"value": ""
},
{
"field":"datepickerfield",
"name": "Birthday",
"constrain": "5-10",
"value": "new Date()"
},
{
"field":"selectfield",
"name": "Select one",
"options":[
{"text": "First Option", "value": 'first'},
{"text": "Second Option", "value": 'second'},
{"text": "Third Option", "value": 'third'}
]
},
]
}
}
Model
Ext.define('dynamicForm.model.Form', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'field', type: 'string'},
{name: 'name', type: 'string'},
{name: 'constrain', type: 'string'},
{name: 'value', type: 'string'}
],
hasMany: {model: 'dynamicForm.model.SelectOption', name: 'options'}
}
});
Ext.define('dynamicForm.model.SelectOption', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'text', type: 'string'},
{name: 'value', type: 'string'}
]
}
});
store
Ext.define('dynamicForm.store.FormStore', {
extend : 'Ext.data.Store',
storeId: 'formStore',
config : {
model : 'dynamicForm.model.Form',
proxy : {
type : 'ajax',
url : 'form.json',
reader : {
type : 'json',
rootProperty : 'form.fields'
}
},
autoLoad: true
}
});
This what i tried so for.
var fromval = Ext.create('dynamicForm.store.FormStore');
fromval.load(function (){
console.log(fromval);
// i added register view which having form panel with id "testForm"
Ext.Viewport.add({
xtype : 'register'
});
for(i=0; i< fromval.getCount(); i++) {
console.log("------");
Ext.getCmp('testForm').add({
xtype: fromval.getAt(i).data.field,
label: fromval.getAt(i).data.name,
value: fromval.getAt(i).data.value,
options: [
{text: "First Option", value: "first"},
{text: "Second Option", value: "second"},
{text: "Third Option", value: "third"}
]
});
}
});
two text fileds and date are woking good, but i don't know how to get options for select field from store, just heard coded now.
over all Based on the above json data, i need to create sencha form dynamically.
Better to follow MVC structure:
Create a model:
Ext.define('MyApp.model.FormModel', {
extend: 'Ext.data.Model',
config: {
fields: ["field","name"]
}
});
A store with proxy:
Ext.define('MyApp.store.FormStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.FormModel',
autoLoad:true,
proxy:
{
type: 'ajax',
url : 'FormData.json', //Your file containing json data
reader:
{
rootProperty:'form.fields'
}
}
}
});
The formData.json file:
{
"form": {
"fields" : [
{
"field":"textfield",
"name": "username"
},
{
"field":"textfield",
"name": "password"
},
]
}
}
And then use the FormStore to fill the form data as you need.
Ext.define('MyApp.view.LoginPage', {
extend: 'Ext.form.Panel',
config: {
items:{
xtype:'fieldset',
layout:'vbox',
items:[{
flex:1,
xtype:'textfield',
id:'namefield',
placeHolder:'Username'
},{
flex:1,
xtype:'passwordfield',
id:'passwordfield',
placeHolder:'Password'
}]
},
listeners:{
painted:function()
{
var store=Ext.getStore('FormStore');
while(!store.isLoaded())
{
console.log("loading...");
}
var record=store.getAt(0);
Ext.getCmp('namefield').setValue(record.data.name);
Ext.getCmp('passwordfield').setValue(record.data.password);
}
}
}
});
{
"data":[
{
"xtype":"textfield",
"title":"UserName",
"name": "username"
},
{
"xtype":"textfield",
"title":"password",
"name": "password"
},
{
"xtype":"textfield",
"title":"phone no",
"name": "birthday"
},
{
"xtype":"textarea",
"title":"address",
"name": "address"
}
]
}
Ext.define('dynamicForm.model.FormModel', {
extend: 'Ext.data.Model',
fields: ['field', 'name']
});
Ext.define('dynamicForm.store.FormStore', {
extend : 'Ext.data.Store',
model : 'dynamicForm.model.FormModel',
proxy :
{
type : 'ajax',
url : 'data/user.json',
reader :
{
type : 'json',
rootProperty:'data'
},
autoLoad: true
}
});
Ext.define('dynamicForm.view.DynaForm',{
extend:'Ext.form.Panel',
alias:'widget.df1',
items:[]
});
Ext.application({
name:'dynamicForm',
appFolder:'app',
controllers:['Users'],
launch:function(){
Ext.create('Ext.container.Viewport',{
items:[
{
xtype:'df1',
items:[]
}
]
});
}
});
Ext.define('dynamicForm.controller.Users',{
extend:'Ext.app.Controller',
views:['DynaForm'],
models:['FormModel'],
stores:['FormStore'],
refs:[
{
ref:'form1',
selector:'df1'
}
],
init:function(){
console.log('in init');
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
var fromval=this.getFormStoreStore();
var form=this.getForm1();
fromval.load({
scope: this,
callback: function(records ,operation, success) {
Ext.each(records, function(rec) {
var json= Ext.encode(rec.raw);
var response=Ext.JSON.decode(json);
for (var i = 0; i < response.data.length; i++) {
form.add({
xtype: response.data[i].xtype,
fieldLabel: response.data[i].title,
name: response.data[i].name
});
}
//form.add(Ext.JSON.decode(json).data);
form.doLayout();
});
}
});
}
});
It will be done automatically if you insert it into any extjs component content :
var jsonValues = "{
"form": {
"fields" : [
{
"field":"textfield",
"name": "username"
},
{
"field":"textfield",
"name": "password"
},
]
}
}";
var panel = new Ext.Panel({
id : 'myPanel',
items : [jsonValues]
});
panel.show();

Sencha Touch 1.1.1 nested JSON Store load

Hi guys I hope someone can help me with this I´m really stuck although it´s some damned beginner question that has already been answered and I assure you I read all of the answer Posts but still can´t get it to work.
I´m using Sencha Touch 1.1.1 and try to get this Store loaded with nested JSON data. Here´s the code:
Ext.regModel("UserData", {
hasMany : [{
name : "id",
type : "integer",
},{
name : "username",
type : "string",
},{
name : "password",
type : "string",
}]
});
var userdata =
{"users": [
{
"id": 16,
"username": "bla#bla.com",
"password": "bla",
}, {
"id": 17,
"username": "bla#bla.com",
"password": "bla",
}
]
};
var myStore = new Ext.data.Store({
model : 'UserData',
data : userdata,
proxy : {
type : 'ajax',
reader : {
type : 'json',
root : 'users' // not working
}
}
});
var myList = new Ext.List ({
fullscreen : true,
store : myStore,
grouped : false,
itemTpl : '<div>{username}</div>'
});
Returns Uncaught Type Error: Arguments list has wrong type. When I rewrite the JSON with an outer Array wrapper, it works, but with wrong root (not users) I definitly saw examples where this worked with the root:'' value.
var userdata =
[ {"users": [
{
"id": 16,
"username": "bla#bla.com",
"password": "bla",
}, {
"id": 17,
"username": "bla#bla.com",
"password": "bla",
}
]
} ];
What am I missing?
If I am not mistaken, in your "UserData" model, it should be fields instead of hasMany.
And try putting your json data in a separate json file and locate the path in your store's proxy.
var myStore = new Ext.data.Store({
model: 'UserData',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'test.json',
reader: {
type: 'json',
root: 'users'
}
}
});
I tested it and it's working fine here. Here is my full code.
Ext.regModel("UserData", {
fields: [
{name: 'id', type:'int'},
{name: 'username', type:'string'},
{name: 'password', type:'string'}
]
});
var myStore = new Ext.data.Store({
model: 'UserData',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'test.json',
reader: {
type: 'json',
root: 'users'
}
}
});
var app = new Ext.Application({
name: 'TestApp',
useLoadMask: true,
launch: function() {
TestApp.views.listToolbar = new Ext.Toolbar({
title: 'Foo Bar',
layout: 'hbox'
});
TestApp.views.list = new Ext.List({
id: 'list',
store: myStore,
emptyText: 'Nothing',
itemTpl: '<div class="username">{username}</div>',
});
TestApp.views.container = new Ext.Panel({
layout: 'fit',
html: 'this is the container',
dockedItems: [TestApp.views.listToolbar],
items: [TestApp.views.list]
});
TestApp.views.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [
TestApp.views.container
]
});
}
});