JSON source to datatables - json

I have this code:
testdata = [{
"hasresults": true,
"resultscount": 5,
"dob": null,
"chart": {
"rows": [
{
"chart": "BAR000",
"firstname": "RUSSELL",
"lastname": "BARON"
},
{
"chart": "BAR001",
"firstname": "BRUSELL",
"lastname": "BARON"
},
{
"chart": "BAR002",
"firstname": "GARY",
"lastname": "BARON"
}
]
}
}];
$('#test').dataTable({
"aaData": testdata,
"aoColumns": [{
"mDataProp": "chart"
}, {
"mDataProp": "firstname"
}, {
"mDataProp": "lastname"
}]
});
Can someone help me why is this not working? It seems that if I removed the following, it will work:
"hasresults": true,
"resultscount": 5,
"dob": null,
"chart": {
Not working fiddle
Working fiddle

You just need to address testdata the correct way. testdata is an array holding an object which have another object, chart, holding an array, rows.
$('#test').dataTable({
"aaData": testdata[0].chart.rows, //<------
"aoColumns": [{
"mDataProp": "chart"
}, {
"mDataProp": "firstname"
}, {
"mDataProp": "lastname"
}]
});
Your code working here -> http://jsfiddle.net/j1fvL96e/

Related

Modify JSON after getting a response from sequelize

I get a JSON from my sequelize function. This i have to modify, because i have to send it to a database importer, who needs it in a fixed form.
Is there a way to customize this function so that I get back the desired result ?
models:
User.associate = function (models) {
User.hasMany(models.SurveyResult)
}`
SurveyResult.associate = function (models) {
SurveyResult.belongsTo(models.User)
The function:
async mediImport (req, res) {
try {
const transaction = await User.findAll({
where: { released: true },
// Select forename as Vorname, name as Nachname
attributes: [
['forename', 'PAPPS286'],
['name', 'Nachname'],
['birthdate', 'PADPS60']
],
include: [{ model: SurveyResult, attributes: ['result'] }]
}).map(user => user.toJSON())
res.send({
transaction
}
)
}
this is the JSON which i get from the function:
{
"transaction": [
{
"PAPPS286": "Tes",
"Nachname": "Josef",
"PADPS60": null,
"SurveyResults": [ {
"result": {
"name": "blau",
"email": "mail",
"birthdate": "01.02.1990"
}
}]
},
{
"PAPPS286": "Dampf",
"Nachname": "Hans",
"PADPS60": null,
"SurveyResults": [
{
"result": {
"name": "blau",
"email": "mail",
"birthdate": "01.02.1990"
}
}
]
},
]
},
This is the JSON form i need:
{
"transaction": [
PAD{
"PAPPS286": "Tes",
"Nachname": "Josef",
"PADPS60": null,
"MH": {
"name": "blau",
"email": "mail",
"birthdate": "01.02.1990"
},
PAD{
"PAPPS286": "Dampf",
"Nachname": "Hans",
"PADPS60": null,
"MH": {
"name": "blau",
"email": "mail",
"birthdate": "01.02.1990"
}
},
]
},
Perhaps there is a way to modify the JSON after i get it back. But i dont Knoe how this can be work.
The below map does what I think you are looking for. You may need to modify it, especially around accessing the variables you need, based on the key. (t.PAPPS286 and t.PADPS60)
Additionally, I am only grabbing the first survey result SurveyResults. Unsure what you want if there are none or if there are more than 1.
var obj = {
"transaction": [{
"PAPPS286": "Tes",
"Nachname": "Josef",
"PADPS60": null,
"SurveyResults": [{
"result": {
"name": "blau",
"email": "mail",
"birthdate": "01.02.1990"
}
}]
},
{
"PAPPS286": "Dampf",
"Nachname": "Hans",
"PADPS60": null,
"SurveyResults": [{
"result": {
"name": "blau",
"email": "mail",
"birthdate": "01.02.1990"
}
}]
},
]
}
obj.transaction = obj.transaction.map((t) => {
return Object.assign({
"PAPPS286": t.PAPPS286,
"Nachname": t.Nachname,
"PADPS60": t.PADPS60,
"MH": {
"name": t.SurveyResults[0].result.name,
"email": t.SurveyResults[0].result.email,
"birthdate": t.SurveyResults[0].result.birthdate
}
})
})
console.log(obj);

Re-arrange JSON file (using adjacency matrix)

I have a json file that looks like this:
[
{
"id": 1,
"country": "Greece",
"names": [
"Alex",
"Betty",
"Catherine",
"Dave",
"Edward",
"Frank",
"George",
"Helen",
"Irene"
]
},
{
"id": 2,
"country": "US",
"names": [
"John",
"Alex",
"Edward",
"Kate",
"Robert",
"Irene",
"Tim",
"Sam"
]
},
{
"id": 3,
"country": "France",
"names": [
"Helen",
"Kate",
"Louise",
"Tim",
"Catherine",
"Arthur",
"Frank",
"Natalie",
"Dave"
]
},
{
"id": 4,
"country": "India",
"names": [
"Ritesh",
"Alex",
"Betty",
"Robert"
]
},
{
"id": 5,
"country": "India",
"names": [
"Nafeez",
"Tom",
"Natalie",
"Gunar",
"Louise",
"Arthur"
]
}
]
I want it to be "name centered" and look like this:
{
"groups": [
{
"gr_id":1
"name":"Alex",
"country":"Greece"
},
.........
{
"gr_id":1
"name":"Irene",
"country":"Greece"
},
{
"gr_id":2
"name":"John",
"country":"US"
..........
{
"gr_id":2
"name":"Sam",
"country":"US"
},
{
"gr_id":3
"name":"Helen",
"country":"France"
},
.........
{
"gr_id":3
"name":"Dave",
"country":"France"
},
{
"gr_id":4
"name":"Ritesh",
"country":"India"
},
........
{
"gr_id":4
"name":"Robert",
"country":"India"
},
{
"gr_id":5
"name":"Nafeez",
"country":"India"
},
...........
{
"gr_id":5
"name":"Arthur",
"country":"India"
}
],
"links": [
{
"source":"Alex"
"target":"Irene",
"count":1
"country":"Greece"
},
...
{
"source":"Alex"
"target":"Arthur",
"count":0
"country":"India"
},
...
]
}
For count in Links I have an adjacency matrix for each country/name (csv format) like this :screenshot of csv file (ad. matrix for India)
This json is just an example. I have much bigger file (I need it for D3 graph visualization)
Reduce() and map() work perfectly for this. This basically takes each item and then maps over the names, appending the results of map() to an array:
let obj = {}
obj.groups = json.reduce(
(acc, curr) => acc.concat(curr.names.map(
item => ({gr_id: curr.id, country: curr.country, name: item})
)), [])
console.log(obj)
// { groups:
// [ { gr_id: 1, country: 'Greece', name: 'Alex' },
// { gr_id: 1, country: 'Greece', name: 'Betty' },
// ...etc
// ]
// }

passing data value to ui-grid

I want to pass the data value ui-grid.I need to pass $scope.ll value to ui-grid.If I copy the data and assigned $scope.ll=[{}] Id and statesum_totalcount are working well. I need to pass $scope.ll to grid
My data in array are as
{
"ID": "3",
"stat_sum": {
"totcount": 3
},
"zip_stats": [
{
"zip": "560045",
"count": 1
},
{
"zip": "567657",
"count": 2
}
],
"qual_stats": [
{
"count": 1,
"qualification": "B.E."
},
{
"count": 2,
"qualification": "BE"
}
],
"prof_stats": [
{
"count": 1,
"profession": "Doctor"
},
{
"count": 2,
"profession": "Software Engineer"
}
],
"city_stats": [
{
"city": null,
"count": 2
},
{
"city": "Bangalore",
"count": 1
}
],
"state_stats": [
{
"count": 1,
"state": "Karnataka"
},
{
"count": 2,
"state": "Kerala"
}
],
"stats_info": [
{
"acount": 3,
"answer": "fgdfgd",
"question": "comment-about-me-"
},
{
"acount": 1,
"answer": "one",
"question": "radio-answer-"
},
{
"acount": 2,
"answer": "two",
"question": "radio-answer-"
},
{
"acount": 3,
"answer": "t-shirt",
"question": "select-any-dress-for-me-[]"
},
{
"acount": 3,
"answer": "no",
"question": "say-yes-or-no-"
},
{
"acount": 3,
"answer": "2015-09-25",
"question": "select-your-b.date-"
},
{
"acount": 3,
"answer": "24",
"question": "select-your-age-"
},
{
"acount": 3,
"answer": "2",
"question": "type-number-"
},
{
"acount": 3,
"answer": "false",
"question": "select-true-or-false-"
}
]
}
In controller
$timeout(function () {
console.log($scope.ll); //works fine
$rootScope.showspinner = false;
$scope.gridOptionsComplex = {
enableFiltering: true,
showGridFooter: true,
showColumnFooter: true,
columnDefs: [
{name: 'ID', width: 100, enableCellEdit: false,},
{name: 'stat_sum.totcount', width: 100, enableCellEdit: false,},
{name: 'zip_stats.zip', width: 100, enableCellEdit: false,},
{name: 'zip_stats.count', width: 100, enableCellEdit: false,},
{name: 'qual_stats.qualification', width: 100, enableCellEdit: false,},
{name: 'qual_stats.count', width: 100, enableCellEdit: false,},
],
data:$scope.ll
};
$scope.$apply(function () {
$scope.aut = true;
});
}, 500, false);
The same kind of problem I faced ,I am giving an example code how to solve this
{
"result": {
"fileNames": [
"Book1 (2).csv",
"address_sample (3).csv",
"Book1.csv"
],
"ids": [
1,
2,
3
]
},
"responseSuccess": "success",
"responseError": null,
"responseInfo": null,
"responseWarning": null,
"responseCode": 0
}
I have output like above format and also I have to Integrate with these in to ui-grid .
example controller side code once the control reached success part I am getting the output as the format of above , so lets see how to integrate with ui-grid,
In my controller I have $scope.gridsOptions like
$scope.gridsOptions = {
columnDefs : [
{
field : 'field',
name : 'Id'
},
{
field : 'filename',
name : 'FileName'
}]
}
I assumed the control came to the success part .success(function()) what ever validate could you please validate then,
.success(function(data){
$scope.resultValues =[];
// Here My PD(Problem Domain says iterate based On `ids`)
for (var i = 0; i < data.result.ids.length; i++) {
// Im getting each ID in $scope.fileId variable
$scope.fileId = data.result.ids[i];
// Here Im getting each fieldNames in $scope.fileName variable
$scope.fileName = data.result.fileNames[i];
//Then I am pushing those values in to fieldId
$scope.resultValues.push({
field : $scope.fileId,
filename : $scope.fileName
});
}
ListData.fileIdValues = angular.copy($scope.resultValues);
// I am pointed those to $scope.gridsOptions.data
$scope.gridsOptions.data = ListData.fileIdValues;
})
Please Note ListData.fileIdValues in my code it is angular service variable this.fileIdValues ={}. For my Problem Domain I need these values so I stored it in serviceand use it where ever I want.

Using a proxy in a store is not working?

hi i create a store connect to contacts.json is not working ,here is my store
Ext.define('senchatest.store.List', {
extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.Ajax'],
alias: 'store.List',
config: {
model: 'senchatest.model.Contact',
proxy: {
type: 'ajax',
url: 'contacts.json',
reader: {
type: 'json'
}
}
}
});
and this is my modal
Ext.define('senchatest.model.Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
and it is my json file
[
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Zed", "lastName": "Zacharias "}
]
what is wrong its not display a data
instead of proxy directly use data it work
eg:
Ext.define('senchatest.store.List', {
extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.Ajax'],
alias: 'store.List',
config: {
model: 'senchatest.model.Contact',
data :[
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Zed", "lastName": "Zacharias "}
]
}
});
This code is working but proxy code is not working what is a issue
Take a look at http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.reader.Reader, it has a perfect example how you can do what you desire
Store
Ext.define('senchatest.store.List', {
extend: 'Ext.data.Store',
alias: 'store.List',
// use the model #Oğuz Çelikdemir suggested
model: 'senchatest.model.Contact',
proxy: {
type: 'ajax',
url : 'contacts.json',
reader: {
type: 'json',
root: 'contacts'
}
},
});
contacts.json
{
"success": true,
"contacts": [
{ "firstName": "Tommy", "lastName": "Maintz" },
{ "firstName": "Ed", "lastName": "Spencer" },
{ "firstName": "Jamie", "lastName": "Avins" },
{ "firstName": "Aaron", "lastName": "Conran" },
{ "firstName": "Dave", "lastName": "Kaneda" },
{ "firstName": "Michael", "lastName": "Mullany" },
{ "firstName": "Abraham", "lastName": "Elias" },
{ "firstName": "Jay", "lastName": "Robinson" },
{ "firstName": "Zed", "lastName": "Zacharias "}
]
}
Modify the model as below ( config property isn't necessary ) :
Ext.define('senchatest.model.Contact', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'}
]
});
EDIT :
I create a Fiddle on Sencha, check it out.
JSON Sample
you may use
autoLoad: true,
proxy: {
type: 'ajax',
url : 'contacts.json'
}

extJs - populate grid with array of arrays

I have an array of persons, each person has an array of contacts. The data is in json format:
[
{
"id": 7900,
"position": "Tillitsvalgt",
"person": {
"id": 1000001,
"lastName": "Andrushko",
"contacts": [
{
"id": 1000001,
"personId": 1000001,
"type": {
"id": 5,
"name": "Mobile phone"
},
"value": "25417"
},
{
"id": 1000002,
"personId": 1000001,
"type": {
"id": 35,
"name": "Mobile phone"
},
"value": "945417"
}
]
}
},
{
"id": 7900,
"position": "Tillitsvalgt",
"person": {
"id": 1000001,
"lastName": "Andrushko",
"contacts": [
{
"id": 1000001,
"personId": 1000001,
"type": {
"id": 5,
"name": "Mobile phone"
},
"value": "25417"
},
{
"id": 1000002,
"personId": 1000001,
"type": {
"id": 35,
"name": "Mobile phone"
},
"value": "945417"
}
]
}
}
]
I want to display two grids, first one with persons and the second one with contacts for selected person. I have created two models:
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{
mapping: 'person.lastName',
name: 'lastName'
}
],
hasMany: [
{
associationKey: 'person.contacts',
model: 'Contact',
name: 'contacts'
}
],
proxy: {
type: 'ajax',
url: 'MemberServlet?operation=get',
reader: {
type: 'json'
}
}
});
and a model for contacts:
Ext.define('Contact', {
extend: 'Ext.data.Model',
fields: [
{
mapping: 'type.name',
name: 'type'
},
{
name: 'value'
}
],
belongsTo: {
model: 'Person'
}
});
In such configuration my second grid displays contacts for all persons, I want it to display only for selected person. How can I do it?