Help anyone, I need to use JSON data in my store. Can someone point what is wrong in my jsonstore config? I need to use the rain_value and air_pressure parameter in my graph but 'data' in JSON wont be set as root.
My device model:
Ext.define('device', {
extend: 'Ext.data.Model',
config: {
fields : [
{
name : 'dev_id',
type : 'int'
},
{
name : 'location'
}
],
hasMany : [
{
model : 'stationData',
name : 'data',
associationKey : 'data'
},
]
}
});
My deviceData model:
Ext.define('stationData', {
extend : 'Ext.data.Model',
config : {
fields : [
'dateTimeRead',
'rain_value',
'air_pressure'
]
}});
My jsonStore:
var store = new Ext.data.Store({
autoLoad : true,
model : 'device',
proxy : {
type : 'ajax',
url : 'dataURL',
reader: {
type: 'json',
root: 'data'
},
}
});
JSON Data:
[{
"dev_id": 171,
"location": "Sample location",
"province": "Sample Province",
"cell_num": "0123456789",
"posx": "longitude",
"posy": "latitude",
"elevation": "105",
"battery": "LP",
"region": "VI",
"type_id": "AWS",
"imei_num": "300234011463010",
"is_ftp": false,
"data": [{
"dateTimeRead": "2013-11-14 11:45:32",
"rain_value": "0.52",
"rain_intensity": "19.3",
"air_pressure": "1002.02",
"wind_speed": "7.9",
"air_humidity": "76.7",
"solar_radiation": "-305363.70",
"wind_direction": "327",
"air_temperature": "29.2",
"rain_cum": "238.07",
"soil_moisture1": "8.88",
"soil_temperature1": "28.7",
"soil_moisture2": "6.37",
"soil_temperature2": "27.6",
"rain_duration": "180",
"wind_speed_max": "14.1",
"sunshine_count": "0",
"sunshine_cum": "19286",
"wind_direction_max": "18"
}, {
"dateTimeRead": "2013-11-14 11:30:32",
"rain_value": "0.00",
"rain_intensity": "0.0",
"air_pressure": "1002.02",
"wind_speed": "8.9",
"air_humidity": "68.6",
"solar_radiation": "-239488.50",
"wind_direction": "322",
"air_temperature": "30.2",
"rain_cum": "237.55",
"soil_moisture1": "8.91",
"soil_temperature1": "28.5",
"soil_moisture2": "6.72",
"soil_temperature2": "27.6",
"rain_duration": "0",
"wind_speed_max": "15.1",
"sunshine_count": "455",
"sunshine_cum": "19286",
"wind_direction_max": "10"
}, {
"dateTimeRead": "2013-11-14 11:15:32",
"rain_value": "0.00",
"rain_intensity": "0.0",
"air_pressure": "1002.02",
"wind_speed": "10.2",
"air_humidity": "67.8",
"solar_radiation": "251642.70",
"wind_direction": "333",
"air_temperature": "31.0",
"rain_cum": "237.55",
"soil_moisture1": "8.90",
"soil_temperature1": "28.4",
"soil_moisture2": "7.01",
"soil_temperature2": "27.6",
"rain_duration": "0",
"wind_speed_max": "18.3",
"sunshine_count": "900",
"sunshine_cum": "18831",
"wind_direction_max": "9"
}]
}]
Related
I have a json object for chart like below:
{
"results": [
{
"dataSets": {
"One": {
"label": "testLabel",
"labels": "test",
"data": [
"10",
"58"
]
}
},
"chart": [
{
"key": "test",
"label": "chart-1",
"chartType": "bar",
"order": "1",
"dataSets": [
{
"style": "line",
"key": "One"
},
]
}
]
}
]
}
I want to get dataSets values like label, labels, data of “one” in chart’s dataSets by providing “one” as key.
Is it possible to do in javascript or vue?
Yes, it is possible. But you will need to make a series of Array.map() to achieve this.
const results = [{
dataSets: {
One: {
label: "testLabel",
labels: "test",
data: ["10", "58"]
}
},
chart: [{
key: "test",
label: "chart-1",
chartType: "bar",
order: "1",
dataSets: [{
style: "line",
key: "One"
}]
}]
}];
const modifiedResult = results.map(result => {
const outerDataSets = result.dataSets;
result.chart = result.chart.map(chart =>
chart.dataSets.map(innerDataSet => ({
...innerDataSet,
...outerDataSets[innerDataSet.key]
}))
);
return result;
});
console.log(modifiedResult);
Also if you are working with Vue, I think its best to put the modification of result on the computed so it will always try to add those dataSets additional data to the chart's dataSets.
Here a sample demo for implementation in Vue.
I'm using the bootstrap table plugin and can't seem to get it to load any values into the table. I've used it before with success, but can't figure out what I'm doing wrong here. The amount of rows is coming through, so I know the JSON data is being read by the bootstrap table, its just that the values are all empty in the table. I think the JSON is in the proper format, and the field names are all consistent. Any ideas?
Javacript
function populate_quote_table()
{
$('#quote_table').bootstrapTable({
onSearch: function (text) {
},
onLoadSuccess: function (data) {
console.log(data);
//$('#test').html(data);
},
url: "<?php echo $site_url?>/quotes.php",
striped: true,
search: true,
showRefresh:true,
showColumns:true,
pagination: true,
showFilter: true,
columns: [{
field: 'QID',
title: 'QID',
}, {
field: 'CID',
title: 'Customer ID',
}, {
field: 'Distance',
title: 'Distance',
}]
});
};
});
PHP
$i = 0;
$quotes[] = array();
if ($result) {
while($row = mysql_fetch_array($result)) {
$quotes[$i]['"QID"'] = $row['quote_id'];
$quotes[$i]['"CID"'] = $row['customer_id'];
$quotes[$i]['"Distance"'] = $row['distance'];
$i++;
}
}
echo json_encode($quotes);
JSON Output
[
{
"QID": "1",
"CID": "1",
"Distance": "1"
},
{
"QID": "2",
"CID": "2",
"Distance": "11"
},
{
"QID": "3",
"CID": "20",
"Distance": "5"
},
{
"QID": "4",
"CID": "21",
"Distance": "67"
}
]
Extra quotes were not needed
Original -
$quotes[$i]['"QID"'] = $row['quote_id'];
Working -
$quotes[$i]['QID'] = $row['quote_id'];
I want to construct an app of hotel and rooms.
Every hotel can have more rooms, I retrieve this data from external server in XML, I parse it and now I have divided into two arrays: hotel and rooms like this:
hotel.json
[
{
"id": "1",
"name": "Hotel1"
},
{
"id": "2",
"name": "Hotel2"
},
{
"id": "3",
"name": "Hotel3"
}
]
rooms.json
[
{
"id" : "r1",
"hotel_id" : "1",
"name" : "Singola",
"level" : "1"
},
{
"id" : "r1_1",
"hotel_id" : "1",
"name" : "Doppia",
"level" : "2"
},
{
"id" : "r1_3",
"hotel_id" : "1",
"name" : "Doppia Uso singol",
"level" : "1"
},
{
"id" : "r2",
"hotel_id" : "2",
"name" : "Singola",
"level" : "1"
},
{
"id" : "r2_1",
"hotel_id" : "2",
"name" : "Tripla",
"level" : "1"
}
]
Into my backbone app I have to make some controller and some parse to retrieve rooms for its hotel.
I want to know if is better for backbone to construct a Json like that:
[
{
"id": "1",
"name": "Hotel1",
"rooms": [
{
"id" : "r1",
"hotel_id" : "1",
"name" : "Singola",
"level" : "1"
},
{
"id" : "r1_1",
"hotel_id" : "1",
"name" : "Doppia",
"level" : "2"
}
]
},
{
"id": "2",
"name": "Hotel2",
"rooms": [
{
"id" : "r2",
"hotel_id" : "2",
"name" : "Singola",
"level" : "1"
},
{
"id" : "r2_1",
"hotel_id" : "1",
"name" : "Doppia",
"level" : "2"
}
]
},
{
"id": "3",
"name": "Hotel3"
}
]
Which is the better mode for backbone in terms of efficiency and parsing?
I thinked the first case but after construct the app I'm not sure.
I would recommend keeping the data structures flat, as Backbone doesn't really support nested collections without some extra effort. Keeping the data model flat will also make it easier for you to map to REST endpoints (ie. '/hotels/1/rooms', 'rooms/1', etc.).
Just to demonstrate the complexities, here is an example of how one would have to associate a collection to a model:
HotelModel = Backbone.Model.extend({
initialize: function() {
// because initialize is called after parse
_.defaults(this, {
rooms: new RoomCollection
});
},
parse: function(response) {
if (_.has(response, "rooms")) {
this.rooms = new RoomCollection(response.rooms, {
parse: true
});
delete response.rooms;
}
return response;
},
toJSON: function() {
var json = _.clone(this.attributes);
json.rooms = this.rooms.toJSON();
return json;
}
});
With a flat data structure, you could do something like this:
HotelModel = Backbone.Model.extend({
idAttribute:'hotel_id',
urlRoot:'/hotels'
});
RoomModel = Backbone.Model.extend({
idAttribute:'room_id',
urlRoot:'/rooms'
});
HotelCollection = Backbone.Collection.extend({
url: '/hotels',
model:HotelModel
});
RoomCollection = Backbone.Collection.extend({
url: '/rooms',
model:RoomModel,
getByHotelId: function(hotelId){
return this.findWhere({hotel_id:hotelId});
}
});
I am new to jqgrid and am trying to use json to load the data. I have tried to use the jqgrid demos as a base and then build from there. The json data looks good, but I can't get anything loaded into the grid. Any ideas? I was hoping the use of loaderror or loadcomplete would at least give me insight, but I am not able to retrieve any message why the grid won't load.
json data:
{
"page": "1",
"total": 1,
"records": "12",
"rows": [
[
"67",
"3 - Sandbox: Appointment Set"
],
[
"68",
"1 - Sandbox: Email requested"
],
[
"69",
"2 - Sandbox: Questions not answered"
],
[
"74",
"1 - TenPointSix: Email requested for more information"
],
[
"75",
"2 - TenPointSix: Registered for webinar2"
],
[
"76",
"3 - TenPointSix: Webinar registration confirmed"
],
[
"93",
"5-Test Entry"
],
[
"94",
"test3"
],
[
"95",
"test2"
],
[
"97",
"Jeff"
],
[
"103",
"sortorder"
],
[
"106",
"reload"
]
]
}
My grid code:
<table id="jsonmap"></table>
<div id="pjmap"></div>
<script language="JavaScript" type="text/javascript">
jQuery("#jsonmap").jqGrid({
url:'sampleLoad.php?client=<?=$clientId5?>',
datatype: "json",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
colNames:['Inv No','Name'],
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:100}
],
rowNum:15,
rowList:[15,30,45],
pager: '#pjmap',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
jsonReader: {
root: "Rows",
cell: "",
page: "Page",
total: "Total",
records: "Records",
repeatitems: false,
id: "0"
},
loadComplete: function() {
alert("Load Complete");
},
loadError: function(xhr,st,err) { $("#jsonmapMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText); },
caption: "JSON Mapping",
width: '900',
height: '300'
});
jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:false,del:false});
Any help would be appreciated.
Thanks,
Jeff
The problem is the wrong jsonReader which you use. For example you use rows in the JSON data, but use root: "Rows". The format of the data corresponds default repeatitems: true property, but you used repeatitems: false and so on.
The correct jsonReader is
jsonReader: {
cell: "",
id: "0"
}
Additionally I would recommend you to add gridview: true and use height: 'auto' instead of height: '300' which simplify the setting of height.
The demo shows the modifications.
I am having a tough time to display footer information using jqGrid. I have followed all the necessary steps to setup footer. The server request is based on some filter condition. The server returns a json with appropriate "userdata" information. Following are the JSON and javascript information.
{
"timeatt": [
{
"empnum" : "12345",
"name" : "ABCDEFG",
"shift" : "1",
"postdate" : "12/27/10",
"regular" : "40",
"ot" : "8",
"dbltime" : "0",
"holiday" : "0",
"vacation" : "0",
"payrate" : "0"
},
{
"empnum" : "67890",
"name" : "HIJKLMN",
"shift" : "1",
"postdate" : "12/27/10",
"regular" : "32",
"ot" : "0",
"dbltime" : "0",
"holiday" : "0",
"vacation" : "8",
"payrate" : "0"
}
],
"userdata": {
"name": "Totals",
"regular": "72",
"ot": "8",
"dbltime": "0",
"vacation": "8",
"holiday": "0"
},
"totalrecords" : "2"
}
jQGrid Information
$("#empinfo").jqGrid({
datatype:'json',
colNames:['Clock#','Name','PostDate','Shift','Regular','Over Time','Dbl Time',
'Vacation','Holiday'],
colModel:[{name:'empnum', index:'empNum', width:60},
{name:'name', index:'name', width:200},
{name:'postdate', index:'postdate', width:60,editable:false,
hidden:true,editrules:{edithidden:false}},
{name:'shift', index:'shift', width:60,editable:true,edittype:'text'},
{name:'regular', index:'regular', width:70,editable:true,
edittype:'text',align:"right", formatter: 'number'},
{name:'ot', index:'ot', width:70,editable:true,edittype:'text',
align:"right", formatter: 'number'},
{name:'dbltime', index:'dltime', width:70,editable:true,
edittype:'text',align:"right", formatter: 'number'},
{name:'vacation', index:'vacation', width:70,editable:true,
edittype:'text',align:"right", formatter: 'number'},
{name:'holiday', index:'holiday', width:70,editable:true,
edittype:'text',align:"right", formatter: 'number'}],
scroll:1,
scrollRows:true,
height:300,
editurl:'clientArray',
footerrow:true,
userDataOnFooter:true,
altRows:true,
onSelectRow: function(rowNum){
if (rowNum && rowNum != lastSel) {
$("#empinfo").saveRow(lastSel);
}
$("#empinfo").editRow(rowNum,true);
lastSel = rowNum;
},
});
I tried everything listed in the jqGrid demo but for somereason, the "userdata" information is not getting populated. Can anybody help me ?
Thanks
SMargabandhu
First of all you should remove comma before }); at the end of your code. Your code is sure not full. For example url parameter is not defined so I suppose the comma come from the reduction of real code.
About your main problem. You should include jsonReader in the jqGrid definition to be able to display the JSON data which you posted. The jsonReader can be following:
jsonReader: {
repeatitems: false,
root:'timeatt',
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
After that the data will be displayed inclusive the 'userdata' will be displayed (see here)
the same name of the columns in (colModel) to return userdata, example:
userdata = new { hours= lista.Sum(x => x.Horas).ToString(), function= "Total HH:" }