Lets say i had a json format like this
$(document).ready(function ()
{
$('#grid').kendoGrid(
{
scrollable: false,
dataSource: {data: [{ test: 1, data: [ { "TestHeader": "This is some test data"} ] }]},
columns: [ { field: 'TestHeader' } ]
});
});
how do i get the testHeader field to display on kendoui grid?
if the json data is like this
{ test: 1, data: [ { "TestHeader": "This is some test data"} ] }
it would work, but not if it is nested like this
{data: [{ test: 1, data: [ { "TestHeader": "This is some test data"} ] }]}
I can't control what server return, so i can't change the return json, so how can i get this done?
I got it done already, using schema: parse on datasource
found it at here How can I use nested Json to populate Kendo UI grid?
Related
I have read plenty of resources and questions here regarding nested JSON but none are asking the exact same.
I am trying to use IBM Instana to retrieve the page load metrics what I plan to load into a JQUERY DataTables table.
The nested JSON I get from Instana:
{
"items" : [ {
"name" : "/Content/Search.htm",
"earliestTimestamp" : 1674432701496,
"cursor" : {
"#class" : ".IngestionOffsetCursor",
"ingestionTime" : 1674509519588,
"offset" : 1
},
"metrics" : {
"pageLoads.sum" : [ [ 1674511200000, 79.0 ] ]
}
}, {
"name" : "/Content/Home.htm",
"earliestTimestamp" : 1674435256403,
"cursor" : {
"#class" : ".IngestionOffsetCursor",
"ingestionTime" : 1674509519588,
"offset" : 2
},
"metrics" : {
"pageLoads.sum" : [ [ 1674511200000, 45.0 ] ]
}
} ],
"canLoadMore" : false,
"totalHits" : 2,
"totalRepresentedItemCount" : 2,
"totalRetainedItemCount" : 2,
"adjustedTimeframe" : {
"windowSize" : 169200000,
"to" : 1674511200000
}
}
and the code to load it and add it to a table in DataTables:
$(document).ready(function () {
$('#example').DataTable({
ajax: {
url: 'data/daily.txt',
dataSrc: 'items',
},
columns: [
{ data: 'cursor.offset' },
{ data: 'name' },
{ data: 'earliestTimestamp' },
{ data: 'metrics[0]' },
],
deferRender: true
});
});
While the whole thing is straightforward, even the nested cursor.offset with the dot, I fail to assign the two value in metrics\pageLoads.sum, especially that the nested pageLoads.sum also contains a dot and the values are in double square brackets without quotation marks. The two values (date and number of page loads) I would like to have in two separate columns, but as fail to load them at all, I went on to load them somehow into one cell, but even that does not work.
I have tried to add pageLoads.sum (then as 'metrics."pageLoads.sum"')in quotes, but didn't help, DataTables threw the error message "Requested unknown parameter 'metrics.....<and the variation I have tried>.
I have also tried:
{ data: 'metrics' }, this returns [object Object] in the html cells
{ data: 'metrics[0]' }, no error from DT, but cell remains empty
{ data: 'metrics[, ]' },no error from DT, but cell remains empty
Is there any way to access the two values within metrics\pageLoads.sum or do I have to change JSON structure before this can be done?
To split the contents of your nested arrays...
"pageLoads.sum" : [ [ 1674511200000, 45.0 ] ]
...into two columns, you can use the following:
columns: [
{ data: 'cursor.offset' },
{ data: 'name' },
{ data: 'earliestTimestamp' },
{
data: 'metrics.pageLoads\\.sum',
render: function (data, type, row) {
return data[0][0];
}
},
{
data: 'metrics.pageLoads\\.sum',
render: function (data, type, row) {
return data[0][1];
}
}
]
This uses the double-backslash I mentioned in a comment (ref.) and also two column renderers which handle the splitting of the nested arrays into 2 separate fields.
The end result looks like this:
I am practicing with simple APIs. I request data from OXFORD API. The data is received correctly and I can navigate through it and extract the definitions or etymologies I want. However when I print the complete response after the .json() the content of some arrays is shown as [Array]. Any Idea what I am missing?
My code looks like this:
let endpoint = "https://od-api.oxforddictionaries.com/api/v2/entries/en-gb/ace?fields=definitions&strictMatch=false";
const headers: {
'app_id': app_id,
'app_key': app_key
}
fetch(endpoint, {headers} )
.then(rawResponse=>rawResponse.json())
.then(response=>{
console.log(response);
console.log(response.results[0].lexicalEntries[0].entries[0].etymologies[0])
});
Result in the console looks like:
'''
{
id: 'ace',
metadata: {
operation: 'retrieve',
provider: 'Oxford University Press',
schema: 'RetrieveEntry'
},
results: [
{
id: 'ace',
language: 'en-gb',
lexicalEntries: [Array],
type: 'headword',
word: 'ace'
},
{
id: 'ace',
language: 'en-gb',
lexicalEntries: [Array],
type: 'headword',
word: 'ace'
}
],
word: 'ace'
}
Middle English (denoting the ‘one’ on dice): via Old French from Latin as ‘unity, a unit’
'''
I had tried with Apps Script, I got same result
'''
results:
[ { id: 'ace',
language: 'en-gb',
lexicalEntries: [Object],
type: 'headword',
word: 'ace' },
'''
Thanks in advance
The first comment here inspired my answer and further search. console.log() mainly prints string and when passing to it an array or an object, it interpret them as far as it can. So for the first level of [object, object] or {A:[],B:[]} it would print it without a problem.
When we go deeper to more nested arrays and objects within the JavaScript object parsed from an API response, it won't be able to interpret it properly and would return [object] or [Array]
e.g. The following can be printed by console.log easily
console.log([{A:1},{B:2},{C:3}])
and returns
[ { A: 1 }, { B: 2 }, { C: 3 } ]
Also,
console.log([{A:1},{B:2},{C:3,D:[1,2,3]}])
easily prints
[ { A: 1 }, { B: 2 }, { C: 3, D: [ 1, 2, 3 ] } ]
But,
console.log([{A:1},{B:2},{C:3,D:[{E:1},{F:2},{G:3}]}])
returns
[ { A: 1 },
{ B: 2 },
{ C: 3, D: [ [Object], [Object], [Object] ] } ]
So we need, to use JSON.stingify to convert it into a string
console.log(JSON.stringify([{A:1},{B:2},{C:3,D:[{E:1},{F:2},{G:3}]}]))
Successfully returns
[{"A":1},{"B":2},{"C":3,"D":[{"E":1},{"F":2},{"G":3}]}]
However, When the JSON object is bigger and deeper, you might need to prettify it using
console.log(JSON.stringify([{A:1},{B:2},{C:3,D:[{E:1},{F:2},{G:3}]}],null,2))
it returns
[
{
"A": 1
},
{
"B": 2
},
{
"C": 3,
"D": [
{
"E": 1
},
{
"F": 2
},
{
"G": 3
}
]
}
]
You can find a reference in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
I am using datatables and here is how my data looks like:
{
"data": [{
"request": {
"responsible": "Pete Jackson",
"valuta": " EUR",
"customer": "Jim Manner",
"office": "123 Houston",
"UNID": "9D574D34B9140D3CC1257B8E002A487E"
}
}, {
"request": {
"responsible": "Jane Awesome",
"valuta": " EUR",
"customer": "Christian Slater",
"office": "503 New York",
"UNID": "2444DAA352E89A44C1257B8E002A487F"
}
}]
}
The datatables columns I have defined as followed:
'columns': [{
data: 'request.office',
'render': function(data) {
return data;
}
}, {
data: 'request.responsible',
'render': function(data) {
return data;
}
}, {
data: 'request.customer',
'render': function(data) {
return data;
}
}
]
Now I want to apply rowGrouping according the following example that I have found: http://live.datatables.net/migixiqi/1/edit
However it uses the rows for grouping and its seems the columns defined as dataSrc are considered as objects cause I get 'No group' returned as row group label.
How can I send in a real value as source in the rowgroup definition instead of the (expected) column value?
Perhaps I dont understand what you are hoping to do, but you can just pass the JSON path to the rowGroup.dataSrc exactly as you do with columns.data :
rowGroup: {
dataSrc: 'request.customer' //just a guess you want to group by custumer
},
http://jsfiddle.net/tgsz78jk/
PS: render() callbacks are unnecessary unless you actually need to do something special with a columns content, sort, filter or search behaviour.
I am using EXT JS 4.1.1.
I have a json response like this:
{ values: ["A","B","C"] }
I then have a model like so:
Ext4.define('model', {
extends: 'Ext4.data.model',
fields: [ 'name' ]
});
I am trying to create models with one value, name, that corresponds to the above json values so that I can use the name values in a ComboBox.
Ext4.define('store',{
extend: 'Ext4.data.Store',
model: 'model',
requires: 'model',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'values',
successProperty: 'success'
}
}
});
The issue I'm having is that when populating my ComboBox with the name attribute, it is empty (""). The raw value is correct, it corresponds directly to the appropriate value.
How can I map this array of values correctly to a name field on my model model?
That is not actually a proper JSON response, paste it into http://jsonlint.com/ and you will see for yourself.
Instead your JSON should look like this:
{
"values": [
{
"name": "A"
},
{
"name": "B"
},
{
"name": "C"
}
]
}
Which you will see is valid if you paste into the jsonlint link above.
The store reader is expecting to see 'name' attributes in the data, but cannot, which is why you are seeing this behaviour.
making first attempt to master Ember.js atm. I'm trying to make a simple CMS, but for some reason I have a problem with getting any data from json displayed. I've already switched from Fixture to RESTAdapter, but I am still stuck with
Error: assertion failed: Your server returned a hash with the key timestamp but you have no mapping for it.
Here's my js code:
App.Store = DS.Store.extend(
{
revision:12,
adapter: 'DS.RESTAdapter'
}
);
App.Menucategory = DS.Model.extend({
timestamp: DS.attr('number'),
status: DS.attr('string')
});
App.MenucategoryRoute = Ember.Route.extend({
model: function() {
return App.Menucategory.find();
}
});
DS.RESTAdapter.reopen({
url: <my url>
});
DS.RESTAdapter.configure("plurals", {
menucategory: "menucategory"
});
Trying to access it with:
<script type="text/x-handlebars" id="menucategory">
{{#each model}}
{{data}}
{{/each}}
</script>
My json structure:
{
"timestamp": 1366106783,
"status": "OK",
"data": [
{
"name": "starters",
"id": 1
},
{
"name": "main dishes",
"id": 2
}]}
Thank you in advance for any help you can provide.
By default the RESTAdapter expects your API to be in a specific format, which your API doesn't conform to, if you can modify your API, you need to get it to return in this format, otherwise you'll need to customize the adapter.
Expected Format (based on your JSON):
{
"menucategory": [
{
"name": "starters",
"id": 1
},
{
"name": "main dishes",
"id": 2
}
],
"meta": {
"timestamp": 1366106783,
"status": "OK",
}
}