I was trying to parse the json data , to list in for android app
The response is as follows
{"records":[{"reg_no":"444444","name":"xyz, pqr","address":"Kathmandu-64, Kathmandu","sex":"Male","qualification":"B..E","university":"T.U","year":"2010","faculty":"Computer","date":"2012-08-17 11:29:38"}]}
Sencha code is as follows
{
xtype: 'nestedlist',
title: 'List',
iconCls: 'star',
displayField: 'name',
store: {
type: 'tree',
fields: [
'name', 'reg_no', 'faculty', 'address', 'university',
{name: 'leaf', defaultValue: true}
],
root: {
leaf: false
},
proxy: {
type: 'jsonp',
url: 'http://timus.com/api.php?name=serish',
reader: {
type: 'json',
rootProperty: 'records'
}
}
},
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().setHtml(post.get('university'));
}
}
}
but is not parsing json.. the followong error is coming
uncaught syntax error : unexpected token
I had the same problem and reading some articles I realize that the proxy type must be "rest" if the url is a restful service.
I saw at: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
Related
Recently,I got the problem when I tried to implement a comment function in an Android APP.
The definition of comments in user.js is as follow
comnents: [{
ownerID: {
type: String,
required: true,
},
commenterID: {
type: String,
required: true,
},
commenterName: String,
content: {
type: String,
require: true,
}
}],
And I have a request like that:
{
"_id":"60d204d6efc6c70022b08dc4",
"comments":[
{
"ownerID":"60d204d6efc6c70022b08dc4",
"commenterID":"60d205afefc6c70022b08dc8",
"commenterName":"Bob",
"content":"Hello World!"
},
{
"ownerID":"60d204d6efc6c70022b08dc4",
"commenterID":"60d20892efc6c70022b08dd2",
"commenterName":"Alice",
"content":"Hello Earth!"
}
]
}
Here is my API
router.post("/writecomment",jsonParser,
async(req,res,next)=>{
const errors=validationResult(req);
if(!errors.isEmpty()){
return res.status(400).json({erros:errors.array()});
}
User.findOneAndUpdate(
{ "_id": req.body._id},
{
$set: {
comments:req.body.comments
}
},
{overwrite:true},
function(err,resp){
if(err) throw err;
if(resp) {
return res.send({
msg:' change successfully'
});
}else{
return res.status(403).json({ success: false, message: 'Failed to change'});
}
}
)
}
)
How do I convert "comments" from request to comments array? Or have a better way to implement this function?
PS: I use Mongoose + Express Framework to develope.
const commentArray = [...req.body.comments]
Will make this for you:
[
{
"ownerID": "60d204d6efc6c70022b08dc4",
"commenterID": "60d205afefc6c70022b08dc8",
"commenterName": "Bob",
"content": "Hello World!"
},
{
"ownerID": "60d204d6efc6c70022b08dc4",
"commenterID": "60d20892efc6c70022b08dd2",
"commenterName": "Alice",
"content": "Hello Earth!"
}
]
Basically what is happening here is, we are iterating over the response you are getting and saving the result in an array. If you want to learn more about the ... operator, check out this link:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
I have developed a bot that has an invite card when the user did not add the bot yet, it will return the following JSON to render the AdaptiveCard:
{
body: [
{
text: translations['MsTeams::AdaptiveCardBodyLooksLikeTryToUseApp'],
wrap: true,
type: 'TextBlock',
},
{
text: translations['MsTeams::AdaptiveCardBodyNeedToInviteApp'],
wrap: true,
type: 'TextBlock',
},
],
actions: [
{
data: {
actionId: 'INSTALL_BOT_SUBMIT',
cancel: true,
},
title: translations['MsTeams::Cancel'],
type: 'Action.Submit',
},
{
data: {
msteams: {
justInTimeInstall: true,
},
actionId: 'INSTALL_BOT_SUBMIT',
},
title: translations['MsTeams::Invite'],
type: 'Action.Submit',
},
],
type: 'AdaptiveCard',
version: '1.0',
}
And it's working fine on desktop, browser, and iOS devices, but not working on Android devices.
Here is the device & app info:
Android device version: 8.0.0
MS teams app version: 1416/1.0.0.2021010802
This is just an idea, but I see lots of hanging commas (e.g. type: 'TextBlock',). It might be that the Android parser is stricter on this - try remove them and test again.
I trying to build an application using Sencha Touch 2.4.1,
and using cordova packager.
My simple application show chart, when i use
"start sencha web start" application for browsing.
(picture 1).
But when i pack the app to android apk,
on my android phone, it doesn't show the chart,
only starting animation..
(picture 2)
However if i remove line with xtype: 'companystockchart',
my application (on phone) is working (of course without chart)!
What am i doing wrong?
Source code:
app.js:
Ext.require([
]);
Ext.application({
name: 'app',
views: ['CompanyStockChart'],
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'fit',
title: 'Chart',
iconCls: 'overview',
items:[{
xtype: 'companystockchart'
}],
listeners: {
activate: function() {
}
}
})
}
});
app.view.CompanyStockChart.js:
Ext.define('app.view.CompanyStockChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.companystockchart',
config: {
store: {
fields: ['name', 'value'],
data: [
{ name: 'Jan', value: 110},
{ name: 'Feb', value: 252},
{ name: 'Mar', value: 952},
{ name: 'Apr', value: 325},
{ name: 'May', value: 123},
{ name: 'Jun', value: 52},
{ name: 'Jul', value: 1122},
{ name: 'Aug', value: 35},
{ name: 'Sep', value: 172},
{ name: 'Oct', value: 752},
{ name: 'Nov', value: 810},
{ name: 'Dec', value: 410}
]
},
animate: false,
interactions: ['panzoom'],
series: [
{
type: 'line',
xField: 'name',
yField: 'value',
style: {
fill: 'rgba(0,40,170,0.3)',
stroke: 'black'
}
}
],
axes: [
{
type: 'numeric',
position: 'left',
title: 'Number of Hits',
minimum: 0,
maximum: 1200,
grid: {
fill: '#efefef',
odd: {
fill: '#cdcdcd'
},
even: {
lineWidth: 3
}
}
},
{
type: 'category',
position: 'bottom',
title: 'Month of the Year',
grid: true,
style: {
estStepSize: 1
}
}
]
}
});
Next i try to debug the app, and i see next issue:
(picture 3)
I am learning secha touch, I want to create a page where after user enter login credentials the JSON response will be received which is as follows
{"items":[{"id":"78e221c8-bbc1-4754-8471-48c863886869","createTime":"2014-05-22T14:57:39.039Z","createUser":"Jon","status":"SAVED","changeTime":"2014-05-22T14:57:39.039Z","changeUser":"Jon","projectId":"63886869-bbc1-4754-8471-48c878e221c8","reportVersionNumber":"1","reportVersionName":"First Version","reportName":"FooBarBaz","reportHash":"qiyh4XPJGsOZ2MEAyLkfWqeQ"}],"totalItems":1
}
currently i have created a page where i have used a listItem and displaying the items in it from the Simple array where data has been given harcoded
and using itemTPL to get it
like this <div class="arHeadline">{projectId}
my current store is
data: [
{
Headline: 'Panel',
Author: 'Sencha',
Content: 'Panels are most useful as Overlays - containers that float over your appl..'
}
but i want to get the data from the json so i created a JSON store
Ext.define('MobileChecklist.store.MyJsonPStore', {
extend: 'Ext.data.Store',
requires: [
'MobileChecklist.model.MyModel',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json',
'Ext.data.Field'
],
config: {
autoLoad: true,
data: [
{
items: [
{
id: '78e221c8-bbc1-4754-8471-48c863886869',
createTime: '2014-05-22T14:57:39.039Z',
createUser: 'Jon',
status: 'SAVED',
changeTime: '2014-05-22T14:57:39.039Z',
changeUser: 'Jon',
projectId: '63886869-bbc1-4754-8471-48c878e221c8',
reportVersionNumber: '1',
reportVersionName: 'First Version',
reportName: 'FooBarBaz',
reportHash: 'qiyh4XPJGsOZ2MEAyLkfWqeQ'
}
],
totalItems: 1
}
],
model: 'MobileChecklist.model.MyModel',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
url: 'data/getPort.json',
reader: {
type: 'json',
idProperty: 'id',
rootProperty: 'items',
totalProperty: 'totalItems',
record: 'items'
}
},
fields: [
{
name: 'reportName'
},
{
name: 'projectId'
}
]
}
});
and my model is
Ext.define('MobileChecklist.model.MyModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
mapping: 'items.reportName',
name: 'reportName',
type: 'string'
},
{
mapping: 'items.projectId',
name: 'projectId',
type: 'string'
}
]
}
});
I want to decode the json response and display it in the ListItem the way i did with the string array
how can I do it please help
EDIT:
if I remove the items from my json response and make it like an array rather than object it works and displays it in the list view
[{"id":"78e221c8-bbc1-4754-8471-48c863886869","createTime":"2014-05-22T14:57:39.039Z","createUser":"Jon","status":"SAVED","changeTime":"2014-05-22T14:57:39.039Z","changeUser":"Jon","projectId":"63886869-bbc1-4754-8471-48c878e221c8","reportVersionNumber":"1","reportVersionName":"First Version","reportName":"FooBarBaz","reportHash":"qiyh4XPJGsOZ2MEAyLkfWqeQ"}],"totalItems":1}]
Set the store data with data.items in your controller, like this: -
Ext.Ajax.request({
url: someurl,
params: {
format: "json"
},
success: function(response) {
Ext.getStore("MyJsonPStore").setData(response.items);
},
failure: function(err) {
console.log("Error", err);
}
});
This is the way to work with json data.
Found your problem, change your store proxy to this:-
proxy: {
type: 'rest', //change it
url: 'data/getPort.json',
reader: {
type: 'json',
idProperty: 'id',
rootProperty: 'items',
totalProperty: 'totalItems'
}
}
No need to map the datas.
I've never worked with the secha touch framework before but JSON Parsing is quite simple. If you already have the JSON coming to your device, try this:
http://developer.android.com/reference/android/util/JsonReader.html
Then create an adapter to your ListView
I am creating an app using sencha-touch 2 and phonegap. The app is for an online newspaper. I have a jsonp request for the store of articles. The JSON request is from WordPress using the JSON API. When I view the app on a web browser the number of articles is correct but when I build it on the android phone only 5 articles appear, no matter the "count" parameter I input into the request.
Here is my ArticleList.js (which includes a piece of static information)
Ext.define('Commentator.store.Article', {
extend: 'Ext.data.Store',
requires: [
'Commentator.model.Article',
'Ext.data.proxy.JsonP'
],
config: {
storeId: 'ArticleStore',
autoLoad: false,
model: 'Commentator.model.Article',
proxy: {
timeout: 3000,
type: 'jsonp',
url: 'http://[site]/?json=get_category_posts?id=features&post_status=publish',
reader: {
type: 'json',
rootProperty: 'posts'
}
}
}
});
Here is my Main.js
Ext.define('Commentator.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
list: 'articles',
side_list: 'side_menu',
navBtn : 'button[name="burgerButton]',
topbar: 'TopBar'
},
control: {
list: {
onDataRefresh: 'updateList',
tap: 'updateList'
},
topbar: {
initialize: 'swipeBar'
}
}
},
swipeBar: function(evt) {
evt.element.on({
swipe: function(e, node, options){
if (Ext.Viewport.getMenus().left._hidden) {
if(e.direction == "right") {
Ext.Viewport.showMenu("left");
}
} else {
Ext.Viewport.hideMenu("left");
}
}
});
},
updateList: function() {
console.log(this.getList());
},
//called when the Application is launched, remove if not needed
launch: function(app) {
Ext.getStore("ArticleStore").load(function(records, options, success) {
console.log(records);
if(!success) {
for(var i = 0; i < 5; i++) {
console.log("errror");
Ext.getStore("ArticleStore").load();
}
}
});
Commentator.view.SubNavigation.setMenu();
//});
}
});
Article.js (the store)
Ext.define('Commentator.store.Article', {
extend: 'Ext.data.Store',
requires: [
'Commentator.model.Article',
'Ext.data.proxy.JsonP'
],
config: {
storeId: 'ArticleStore',
autoLoad: false,
model: 'Commentator.model.Article',
proxy: {
timeout: 3000,
type: 'jsonp',
url: 'http://[site]/?json=get_category_posts?id=features&post_status=publish',
reader: {
type: 'json',
rootProperty: 'posts'
}
}
}
});
I found the solution to our problem. It was a problem with the WordPress JSON API. We switched over to Thermal API and now it works perfectly.