I am trying to render DataTable-rows from a json file, placed on the same directory. But unfortunately, the DataTable-Body stays empty, and no error is displayed in the console.
Here is the (reduced) HTML-Code:
<table id="opTable">
<thead>
<tr><th class="partner_id">ID</th><th>ShortName</th><th>DisplayName</th><th>LogoUrl</th><th>Incent</th><th>JTS-URL</th></tr>
</thead>
<tbody>
</tbody>
</table>
Here is the JavaScript I am using to load the data from the json file:
<script>
$(document).ready(function() {
$('#onlinePartnerTable').DataTable({
"ajax" : "../test2.json",
"columns": [{
"data": "pId"
}, {
"data": "shrName"
}, {
"data": "DplayName"
}, {
"data": "lgo"
}, {
"data": "inc"
}, {
"data": "featured"
}]
});
});
</script>
and here is a sample of my json file:
{
"partnerList": [
{
"shrname": "bchan",
"Dplayname": "bchang-Shop",
"pId": "id12345",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "1 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [
{
"heady": "",
"body": ""
}
]
}
},
{
"shrname": "hereIsIt",
"Dplayname": "HereIs-Shop",
"pId": "id65432",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "2 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [
{
"heady": "",
"body": ""
}
]
}
}
]
}
I am becomming this error now.. See the image below.
try this
var t = [{
"shrname": "bchan",
"Dplayname": "bchang-Shop",
"pId": "id12345",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "1 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [{
"heady": "",
"body": ""
}]
}
}, {
"shrname": "hereIsIt",
"Dplayname": "HereIs-Shop",
"pId": "id65432",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "2 to 1",
"dets": {
"tmage": "someUrl/here",
"desp": "desciption",
"jturl": "jtUrl/here",
"jtbut": "Shop",
"termy": [{
"heady": "",
"body": ""
}]
}
}];
$(document).ready(function() {
$('#opTable').DataTable({
"aaData": t,
"columns": [{
"data": "pId"
}, {
"data": "shrname"
}, {
"data": "Dplayname"
}, {
"data": "lgo"
}, {
"data": "inc"
}, {
"data": "featured"
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<table id="opTable">
<thead>
<tr>
<th class="partner_id">ID</th>
<th>ShortName</th>
<th>DisplayName</th>
<th>LogoUrl</th>
<th>Incent</th>
<th>JTS-URL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Based on one of the links Turnip provided in the comments, Datatables Ajax Data Source (objects), your data should look like this:
{
"data": [
{
"shrname": "bchan",
"Dplayname": "bchang-Shop",
"pId": "id12345",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "1 to 1",
},
{
"shrname": "hereIsIt",
"Dplayname": "HereIs-Shop",
"pId": "id65432",
"featured": "0",
"lgo": "https://url.here.com/url",
"inc": "2 to 1",
}
]
}
I'm not sure what you're trying to do with the "dets" part of your data though
Related
The JSON data I am working on it. This is coming from Facebook ad API. This is being build for google data studio connector
{
"data": [
{
"adcreatives": {
"data": [
{
"actor_id": "8834759718540",
"id": "538"
}
]
},
"insights": {
"data": [
{
"ad_id": "34536578578",
"impressions": "89108",
"actions": [
{
"action_type": "comment",
"value": "02"
},
{
"action_type": "post",
"value": "03"
}
],
"date_start": "2022-06-11",
"date_stop": "2022-07-10"
}
],
"paging": {
"cursors": {
"before": "MAZDZD",
"after": "MAZDZD"
}
}
},
"created_time": "2022-06-10T22:59:33+0600",
"id": "34536578578"
},
{
"adcreatives": {
"data": [
{
"actor_id": "7834759718970",
"id": "342"
}
]
},
"insights": {
"data": [
{
"ad_id": "238509545896206",
"impressions": "57803",
"actions": [
{
"action_type": "post_engagement",
"value": "2102"
},
{
"action_type": "page_engagement",
"value": "03"
}
],
"date_start": "2022-06-11",
"date_stop": "2022-07-10"
}
],
"paging": {
"cursors": {
"before": "MAZDZD",
"after": "MAZDZD"
}
}
},
"created_time": "2022-06-11T22:59:33+0600",
"id": "238509545896206"
}
],
"paging": {
"cursors": {
"before": "dfgdfgdfgdfsdgdfgdfgdfgdfgdgdg",
"after": "yuyuyuyutyuytuyutytynfrgersggsgs"
}
}
}
Here is the JavaScript code I have used in google app script but it is showing error. I know it is totally wrong
var data = {data: parseData.data.map(({actions, ...rest}) => ({...rest,...Object.fromEntries(actions.map(({action_type, value}) =>[action_type, value]))}))};
console.log(data);
Output should be like the following way so that I can get all the data in objective
{
"data": [
{
"actor_id": "8834759718540",
"id": "538",
"ad_id": "34536578578",
"impressions": "89108",
"comment": "02",
"post": "03",
"date_start": "2022-06-11",
"date_stop": "2022-07-10",
"created_time": "2022-06-10T22:59:33+0600"
},
{
"actor_id": "7834759718970",
"id": "342",
"ad_id": "238512373324806",
"impressions": "57803",
"post_engagement": "2102",
"page_engagement": "03",
"date_start": "2022-06-11",
"date_stop": "2022-07-10"
"created_time": "2022-06-11T22:59:33+0600"
}
],
"paging": {
"cursors": {
"before": "MAZDZD",
"after": "MQZDZD"
}
}
}
You can try the code below, but it only works if adcreatives.data and insights.data have only 1 element :
let part = data.data.map(item => ({
"actor_id": item.adcreatives.data.at(0).actor_id,
"id": item.adcreatives.data.at(0).id,
"ad_id": item.insights.data.at(0).ad_id,
"impressions": item.insights.data.at(0).impressions,
"comment": item.insights.data.at(0).actions.at(0).value,
"post": item.insights.data.at(0).actions.at(1).value,
"date_start": item.insights.data.at(0).date_start,
"date_stop": item.insights.data.at(0).date_stop,
"created_time": item.created_time
}));
let result = {
data: part,
paging: data.paging
}
console.log(result);
Data is not populated in data table with array objects, getting blank screen. Tried with below code, any issue pls suggest
$('#example3').DataTable( {
data:storedJsonData,
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "position" },
{ "data": "salary" },
{ "data": "start_date" },
{ "data": "office" },
{ "data": "extn" }
]
} );
Fiddle
Data is not populated because columns header is case sensitive and must equal to given data.
I fix your data and columns header. Now it's work and show your data on DataTable.
var storedJsonData = [{
"id": "1",
"name": "abc",
"position": "Accountant",
"office": "Tokyo",
"Age": "63",
"start_date": "2011/07/25",
"salary": "$170,750",
"extn": "2"
},
{
"id": "2",
"name": "def",
"position": "Accountant",
"office": "Tokyo",
"Age": "63",
"start_date": "2011/07/25",
"salary": "$170,750",
"extn": "2"
}
];
$('#example3').DataTable({
data: storedJsonData,
"columns": [{
"data": "id"
},
{
"data": "name"
},
{
"data": "position"
},
{
"data": "salary"
},
{
"data": "start_date"
},
{
"data": "office"
},
{
"data": "extn"
}
]
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table id="example3" class="display" style="width:100%">
</table>
$scope.html = [{
"name": "teste",
"data": [{
"tag": {
"name": "h1",
"text": "Titulo 1",
"colValue": "col-xs-12"
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
}, {
"tag": {
"name": "h1",
"text": "Titulo 2",
"colValue": "col-xs-12"
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-8"
}
}]
}, {
"name": "teste",
"data": [{
"tag": {
"name": "h1",
"text": "Titulo 3",
"colValue": ""
}
}, {
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
}]
}];
I having some issues creating a dynamically form using javascript (angular) and bootstrap. The idea is to create dynamically the html tags.
My issue: h1 is not rendering properly when h1 > 1, it's not jumping to next line.
First take a look here: http://jsfiddle.net/92z54z04/951/
It needs to be like this way:
Add class=col-xs-12 to the inner ng-repeat:
<div class="col-xs-12" ng-repeat="(i, t) in h.data">
http://jsfiddle.net/92z54z04/957/
I have a FooTable that gets a part number returned as 3 separate cells. I'd like to combine them into one cell but I'm unsure of how the formatter and parser work for FooTable. my table html is just an empty table, everything is handledin the javascript. How would I go about doing this?
$(document).ready(function() {
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{"formatter": function(value){
return //I'm thinking this is where the code would go to join the next 3 columns? in the format ##.###.##
}},
{ "name": "PartCategory", "title": "PC" },
{ "name": "PartNumber1", "title": "PN1" },
{ "name": "PartNumber2", "title": "PN2", },
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": $.getJSON("../dist/scripts/testGetParts.php")
});
});
});
You can simply add data-hide="all" to the first two columns of those three:
{ "name": "", "title": "", data-hide="all"},
{ "name": "", "title": "", data-hide="all"},
{ "name": "Part Info", "title": "Part Information" }
Merge those in php (which you are good at) and just show them in here as one col in your dataset and Voila.
The simpler version if you can change the dataset is to not add those columns at all.
Another option if you cannot/don't want to change your server side code is to get the data and change it js and then bind them to rows afterwards.
var rows = $.getJSON("../dist/scripts/testGetParts.php");
foreach(row in rows) {
//merge those cols here in the third one
}
And then:
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{ "name": "PartCategory", "title": "PC", data-hide="all" },
{ "name": "PartNumber1", "title": "PN1", data-hide="all"},
{ "name": "Part Info", "title": "Part information" },
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": rows
});
});
Not sure how you do it persay in footable, in kendo you would do it like so.
$(document).ready(function() {
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{ "title":"PartNumber", formatter: function(data){
return data.PartCategory +"."+ data.PartNumber1 +"." + PartNumber2;
}},
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": $.getJSON("../dist/scripts/testGetParts.php")
});
});
});
I have json object like this
[
{
"name": "first_name",
"value": "sssssssssssssssssss"
},{
"name": "email",
"value": "ss.ss#gmail.com"
}, {
"name": "address",
"value": "ssssssssssssssssssss"
}, {
"name": "PhoneNumber",
"value": "12342123321"
}
]
This data is coming on form subbmission
But i want json data as
{
"formProperties": {
"table": "users",
"mode": "insert",
"method":"post",
"action":"urlhere",
"user":"admin"
},
"formValues": [
{
"name": "first_name",
"value": "sssssssssssssssssss"
},{
"name": "email",
"value": "ss.ss#gmail.com"
}, {
"name": "address",
"value": "ssssssssssssssssssss"
}, {
"name": "PhoneNumber",
"value": "12342123321"
}
]
}
How to reconstruct JSON object. please help me friends I was strucked with this problem.
Thanks in advance
Assume the JSON as string is saved in the variable called json you can use the following code:
var newObject = {
"formProperties": {
"table": "users",
"mode": "insert",
"method":"post",
"action":"urlhere",
"user":"admin"
},
"formValues": JSON.parse(json)
};
var newJson = JSON.stringify(newObject);