Using datatables when returning json objects - json

I want to use datatable to return JSON from txt or some web api.
So, everything works well if data is in following format (coopInformation.txt):
{
"data": [
{
"employer": "Unisys",
"degree": "NETSYS-MS",
"city": "Blue Bell PA",
"term": "20151"
},
{
"employer": "Paychex Inc",
"degree": "INFOST-MS",
"city": "Rochester NY",
"term": "20151"
},
{
"employer": "Paychex Inc",
"degree": "INFOST-MS",
"city": "Rochester NY",
"term": "20151"
}
]
}
This is my jquery call:
$(document).ready(function() {
$('#example').DataTable({
ajax: 'ajax/data/coopInformation.txt',
columns: [
{
data: 'employer'
},
{
data: 'degree'
},
{
data: "city"
},
{
data: "term"
}
]
});
});
But when json object don't start with "data", for example starts with "coopInformation", this call returns an error even if I change columns to coopInformation:
$(document).ready(function() {
$('#example').DataTable({
ajax: 'ajax/data/coopInformation.txt',
columns: [
{
coopInformation: 'employer'
},
{
coopInformation: 'degree'
},
{
coopInformation: "city"
},
{
coopInformation: "term"
}
]
});
});
Uncaught TypeError: Cannot read property 'length' of undefined
at jquery.dataTables.min.js:65
at h (jquery.dataTables.min.js:51)
at Object.success (jquery.dataTables.min.js:52)
at fire (jquery-3.5.1.js:3496)
at Object.fireWith [as resolveWith] (jquery-3.5.1.js:3626)
at done (jquery-3.5.1.js:9786)
at XMLHttpRequest. (jquery-3.5.1.js:10047)
It looks like this libs are predefined to use "data" or I am wrong...
My question is: how to make a simple call like this using something else but not "data". On datatables web, all examples are used with this "data".
Kind regards,
Milan

Related

angularJS $resource response is both array AND object

got this json file:
[
{
"name": "paprika",
"imgSrc": "img/paprika.jpg"
},
{
"name": "kurkku",
"imgSrc": "img/kurkku.jpg"
},
{
"name": "porkkana",
"imgSrc": "img/porkkana.jpg"
},
{
"name": "lehtisalaatti",
"imgSrc": "img/lehtisalaatti.jpg"
},
{
"name": "parsakaali",
"imgSrc": "img/parsakaali.jpg"
},
{
"name": "sipula",
"imgSrc": "img/sipuli.jpg"
},
{
"name": "peruna",
"imgSrc": "img/peruna.jpg"
},
{
"name": "soijapapu",
"imgSrc": "img/soijapapu.jpg"
},
{
"name": "pinaatti",
"imgSrc": "img/pinaatti.jpg"
}
]
Which I successfully fetch in a factory:
factory('getJson', ['$resource', function($resource) {
return $resource('json/vegs.json', {}, {
query: {method:'GET', isArray:true}
});
}]);
in my Controller I can get the json's file content:
var vegs = getJson.query();
$scope.vegs = vegs;
console.log(vegs)
console.log(typeof vegs)
The weird part is the first console.log produces an array of objects, as expected.
The second console says it's an "object", and not an array.
I can get the .json content to my view using {{vegs}}, and I can use ng-repeat as well, tho in the controller I can't do vegs[0] or vegs.length. It comes out empty.
I'm breaking my head on this for over 3 hours now :)
This isn't an 'answer'. Just an observation on one part of your issue. (Sorry, can't comment yet...new to stackoverflow).
Just a note on your comment that "The second console says it's an "object", and not an array." Using typeof on an array will always return "object".
There are various (and debated, it seems) ways to test if it's an array--Array.isArray(obj) for example.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

Extracting json object and filling in user label

[{"id":1,"name":"ABC"},{"id":2,"name":"XYZ"}]
This is how the data is returned by the controller in json format
I want to store it in the following format:
var json = {
"users": [
{ "id": "1", "name": "ABC" },
{ "id": "2", "name": "XYZ" },
]
}
Following is the code I have used but doesnt work.
var json =
{
"users": $.getJSON("#Url.Action("SearchCMSAdmins")")
}
$("#DistributorCMSAdmin").tokenInput("#Url.Action("SearchWithName")", {
theme: "facebook",
preventDuplicates: true,
prePopulate:json.users
});
Any help is appreciated. Thanks in advance.
$.getJson is asynchronous, so you need to use the success callback for getting the response and doing the operation. Try this INstead.
$.getJSON("#Url.Action("SearchCMSAdmins")",function(data){
var json= {"users":data};
$("#DistributorCMSAdmin").tokenInput("#Url.Action("SearchWithName")", {
theme: "facebook",
preventDuplicates: true,
prePopulate:json.users
});
});

evaluating json object returned from controller and attaching it to prepopulate attribute of tokeninput

I am using loopjs tokeninput in a View. In this scenario I need to prePopulate the control with AdminNames for a given Distributor.
Code Follows :
$.getJSON("#Url.Action("SearchCMSAdmins")", function (data) {
var json=eval("("+data+")"); //doesnt work
var json = {
"users": [
eval("("+data+")") //need help in this part
]
}
});
$("#DistributorCMSAdmin").tokenInput("#Url.Action("SearchWithName")", {
theme: "facebook",
preventDuplicates: true,
prePopulate: json.users
});
There is successful return of json values to the below function. I need the json in the below format:
var json = {
"users":
[
{ "id": "1", "name": "USER1" },
{ "id": "2", "name": "USER2" },
{ "id": "3", "name": "USER3" }
]
}

Issues Parsing a Facebook Graph API JSON Message using JQuery $.each Function

I have been trying to access/parse the “message” object found in the JSON results hereafter, issued by the Facebook Graph API, using the Javascript JQuery $.each(function()) Function but without success. I am able to access the “name” object, but not the objects found in the statuses=>data array. I have tried a multitude of syntaxes, but without success. I was wondering if one could provide a syntactical example using the Javascript JQuery $.each(function()) Function of how I could access the “message” object. As you will notice, the “message” objects are found under the following structure: results=>friends=>data array=>statuses=>data array=>message.
{
"id": "idValue",
"friends": {
"data": [
{
"name": "NameValue",
"id": "idValue",
"statuses": {
"data": [
{
"message": "Msg1",
"updated_time": "Date",
},
{
"message": "Msg2",
"updated_time": "Date",
},
],
}
},
{
"name": "NameValue",
"id": "idValue",
"statuses": {
"data": [
{
"message": "Msg1",
"updated_time": "Date",
},
{
"message": "Msg2",
"updated_time": "Date",
},
],
}
}
],
}
}
Assuming that that block is stored in response:
console.log(response);
$.each(response.friends.data, function(i, friend){
console.log(friend);
$.each(friend.statuses, function(i, status){
console.log(status);
});
});
Un-tested, but it should work. It helps to console.log along the way to be sure what you're looking at. See the log in the inspector in Chrome or Firefox

Extract Json data on client side

I have following JSON data coming to client. I need to extract the data somehow so I can loop through it to get all name & count values.
{
"summarydata": {
"rows": [
{
"name": "Cisco0 Webinar US",
"count": "1"
},
{
"name": "Resource Nation CC",
"count": "1"
},
{
"name": "test",
"count": "10"
},
{
"name": "test",
"count": "2"
},
{
"name": "Vendor Seek",
"count": "1"
}
]
}
}
$.extend($.jgrid.defaults,
{ datatype: 'jsonstring' },
{ ajaxGridOptions: { contentType: "application/json",
success: function (data, textStatus) {
if (textStatus == "success") {
var thegrid = $("#BuyBackGrid")[0];
thegrid.addJSONData(data.data);
var summaryresult = $.parseJSON(data.summarydata.rows[0]);
alert(summaryresult );// this gives me null
alert(data.summarydata.rows[0].name); //this gives me first name element which is "Cisco0 Webinar US" in my case.
// alert($.parseJSON(data).summarydata.rows[0].name);
}
} //end of success
}//end of ajaxGridOptions
});
Leveraging jQuery...
The $.getJSON() function parses a local JSON file and returns it as an object.
$.getJSON("myJSON.js", function(json){
alert(json.summarydata.rows[0].name);
});
You could also just do this, using the JSON library for javascript (the object is also standard in most recent browsers).
alert(JSON.parse(myJSONString).summarydata.rows[0].name);