I am working an angular + node dashboard application and having trouble displaying JSON data in highcharts
JSON response:
[{"output":"FAIL","count":"4"},{"output":"PASS","count":"17"}]
public uat_deployment_chart_options: Highcharts.Options;
//this is the method I created to fetch the data
public get_uat_deployment_data() {
this.uat_deployment_subscription = this.curl_connection
.get_uat_deployment_data()
.subscribe(data => {
this.uat_deployment_data = data;
this.uat_deployment_data.forEach(val => {
val.count = parseInt(val.count)
});
this.uat_deployment_chart_options = {
title: {
text: "UAT Deployments"
},
series: [
{
data: this.uat_deployment_data,
type: "pie",
colors: ["#F44336", "#CDDC39"]
}
],
credits: {
enabled: false
},
};
});
}
If I manually paste the data and change the object keys to, "name" and "y" respectively the data is displayed, otherwise I get nothing
[{ "name": "FAIL", "y": 3 }, { "name": "PASS", "y": 16 }]
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);
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
I am trying to read following json data into a jqgrid.
var myStr = { "version" : 2,
"query" : "java",
"location" : "suwanee, ga",
"dupefilter" : true,
"highlight" : true,
"radius" : 25,
"start" : 1,
"end" : 10,
"totalResults" : 826,
"pageNumber" : 0,
"results" : [
{
"jobtitle" : "Software Development Team Lead Job",
"company" : "GM",
"city" : "Roswell",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Roswell, GA",
"source" : "General Motors",
"date" : "Tue, 24 Dec 2013 08:21:00 GMT",
"snippet" : "principles, techniques and best practices. - Demonstrated expert knowledge in <b>Java<\/b> and\/or .NET. - Demonstrated expert knowledge in building, debugging and... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=778874434418454d&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 34.021976,
"longitude" : -84.35714,
"jobkey" : "778874434418454d",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Roswell, GA",
"formattedRelativeTime" : "1 day ago"
}
,
{
"jobtitle" : "Software Systems Engineer (Java\/J2EE)",
"company" : "Universal Business Solutions",
"city" : "Alpharetta",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Alpharetta, GA",
"source" : "Universal Business Solutions",
"date" : "Tue, 17 Dec 2013 18:37:25 GMT",
"snippet" : "years experience with <b>Java<\/b> & J2EE Must be motivated... environment. Experienced with <b>Java<\/b>, J2EE, Oracle, UNIX, SQL, Unix Shell script, <b>Java<\/b> Script, MVC Desired... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=7066b95f71004292&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 34.074177,
"longitude" : -84.29121,
"jobkey" : "7066b95f71004292",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Alpharetta, GA",
"formattedRelativeTime" : "8 days ago"
}
,
{
"jobtitle" : "Software Engineer",
"company" : "ACI Worldwide",
"city" : "Norcross",
"state" : "GA",
"country" : "US",
"formattedLocation" : "Norcross, GA",
"source" : "ACI Worldwide",
"date" : "Thu, 19 Dec 2013 11:51:00 GMT",
"snippet" : "\u2022 Experienced <b>Java<\/b> engineer for developing commercial... development experience \u2022 2 years of professional <b>Java<\/b> development with 2+ years of J2EE. \u2022 2 years of... ",
"url" : "http:\/\/www.indeed.com\/viewjob?jk=7ac5988d9e5f0990&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
"onmousedown" : "indeed_clk(this, '1050');",
"latitude" : 33.93956,
"longitude" : -84.20879,
"jobkey" : "7ac5988d9e5f0990",
"sponsored" : false,
"expired" : false,
"formattedLocationFull" : "Norcross, GA",
"formattedRelativeTime" : "6 days ago"
}
]
};
$("#myGrid").jqGrid({
//url: "testData.xml",
dataType:"json",
data : myStr,
jsonReader: {
repeatitems: false,
root: "results"
},
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto",
loadonce: true
});
I tried to read the data using jsonreader, set the data type as "json" and root as "results".
There are no data populated in jqgrid, Could anybody educate me, what I am missing here ?
The error in your code there are because of small misunderstanding about the meaning of the options jqGrid. If you define a variable like myStr in your code
var myStr = {
"version" : 2,
...
"results" : [
{
...
}
]
};
you don't use JSON. It's just usage of object literals to create new object. Such syntax is the most simple and effective way to create and initialize an object in JavaScript. Only if properties have special characters it's required to enclose property names in " or '. So the same code can be rewritten as
var myStr = {
version : 2,
...
results : [
{
...
}
]
};
So I wanted to stress that the above don't use JSON at all. The correct value of datatype parameter (not dataType) should be "local" instead of "json". The options jsonReader or loadonce will be ignored in the case. The input data should be array of items specified by data option of jqGrid.
So the fixed code should be like the following
$("#myGrid").jqGrid({
datatype: "local",
data: myStr.results,
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
(see the demo).
If your real code do load the data from the server it should use url parameter. In the case the options jsonReader or loadonce can be used and the code will be like below
$("#myGrid").jqGrid({
url: "Sri2.json",
datatype: "json",
jsonReader: {
repeatitems: false,
root: "results"
},
loadonce: true,
colNames: ["Trending Jobs"],
colModel: [
{ name: "url" }
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
(see another demo).
You code have strange properties like onmousedown. If you need to set onmousedown property on some cell you can use cellattr property in colModel. It allows you to set any additional property to <td> element which represent the cell of the grid. For example one more demo uses the following code
function indeed_clk (obj, id) {
alert("onmousedown with id=" + id);
}
$(function () {
var myStr = {
...
"results" : [
{
...
"onmousedown" : "indeed_clk(this, '1050');",
...
}
]
};
$("#myGrid").jqGrid({
datatype: "local",
data: myStr.results,
colNames: ["Trending Jobs"],
colModel: [
{
name: "url",
title: false,
cellattr: function (rowId, cellValue, rawObject) {
if (rawObject.onmousedown) {
return 'onmousedown="' + rawObject.onmousedown + '"';
}
}
}
],
rowNum: 5,
rowList: [5, 10, 20, 100, 10000],
pager: "#pager",
gridview: true,
rownumbers: true,
viewrecords: true,
height: "auto"
});
});
It set onmousedown attribute which calls global function indeed_clk. onmousedown will be set on the cells in the column url using cellattr property.
I have kendo grid in my application.And in my grid filterable is true.In grid one row has numeric text-box in filter,when we click on spinners it is showing infinity values.So I want to give some limit for numeric text-boxes in filter.How to give some limit for numeric text boxes in grid filter.?
My grid code is
var grid = $("#grid").kendoGrid({
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema : {
model: {
fields: {
OrderID : { type: "number" },
Freight : { type: "number" },
ShipName : { type: "string" },
OrderDate: { type: "date" },
ShipCity : { type: "string" }
}
}
},
pageSize : 10
},
filterable: true,
sortable : true,
pageable : true,
columns : [
{
field : "OrderID",
filterable: false
},
"Freight",
{
field : "OrderDate",
title : "Order Date",
width : 100,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipName",
title: "Ship Name",
width: 200
},
{
field: "ShipCity",
title: "Ship City"
}
]
}).data("kendoGrid");
Once try this
filterMenuInit: function(e) {
var numeric = e.container.find("[data-role=numerictextbox]").data("kendoNumericTextBox");
if (numeric) {
numeric.min(0);
}
}