Show key as value in datatable - javascript

Hi I'm currently having trouble with datatable. My datasource is object and I want every first key in the object displayed as value in datatable. Here is my code.
var my_data = {
"content": [
{
"data_v1": [{"id" : 1}]
},
{
"data_v2": [{"id" : 2}]
},
{
"data_v3": [{"id" : 3}]
}
]
};
$(document).ready(function() {
$('#example').DataTable( {
data:my_data,
columns: [
{ data: 'content'
}
]
} );
} );
What output I expect is this.
| Content |
-------------
data_v1
data_v2
data_v3
Note: As long as posible, I don't want to use forloop or any kind of loop. TIA
Any help will be so much appreciated.

Try
var myData = {
"content": [
{
"data_v1": [{"id" : 1}]
},
{
"data_v2": [{"id" : 2}]
},
{
"data_v3": [{"id" : 3}]
}
]
};
$(document).ready(function()
{
$('#example').DataTable( {
data: Object.keys(myData["content"]),
columns: [
{ title: 'content'
}
]
});
});
Object.keys will return an array of keys from the data provided

This answer is from #colin of Datatable.
$(document).ready(function() {
var my_data = {
"contents": [{
"data_v1": [{
"id": 1
}]
},
{
"data_v2": [{
"id": 2
}]
},
{
"data_v3": [{
"id": 3
}]
}
]
};
var table = $('#example').DataTable({
data: my_data.contents,
columnDefs: [{
targets: 0,
render: function(data, type, row, meta) {
return (Object.keys(row)[0]);
}
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="example"></table>

Related

How to convert nested array of object into arraylist in javascript?

i have a nested array of object and i want to convert in arraylist like this :
this is my data array of object :
{
"status": true,
"message": "",
"data": [{
"pasien_docs": [{
"ecg": null,
"date": "2020-01-21T05:22:01.901Z"
}, {
"ecg": 1.03,
"date": "2020-01-21T05:22:02.979Z"
}, {
"ecg": 1.04,
"date": "2020-01-21T05:22:04.053Z"
}, {
"ecg": 1.04,
"date": "2020-01-21T05:22:05.126Z"
},
]
}
]
}
and i want change convert to array like this :
{
"status": true,
"message": "",
"data": [
[
"2020-01-21T05:22:01.901Z",
null
],
[
"2020-01-21T05:22:01.901Z",
1, 03
]
[
"2020-01-21T05:22:01.901Z",
1.04
]
[
"2020-01-21T05:22:01.901Z",
1.04
]
]
}
i try using map to convert on result like this :
result = result.map((u, i) => [
u.pasien_docs[i].date,
u.pasien_docs[i].ecg,
]);
but why i only get result data of one array not four data ? help me please, thankyou..
{
"status": true,
"message": "",
"data": [
[
"2020-01-21T05:22:01.901Z",
null
]
]
}
Would that work for you?
const src = {"status":true,"message":"","data":[{"pasien_docs":[{"ecg":null,"date":"2020-01-21T05:22:01.901Z"},{"ecg":1.03,"date":"2020-01-21T05:22:02.979Z"},{"ecg":1.04,"date":"2020-01-21T05:22:04.053Z"},{"ecg":1.04,"date":"2020-01-21T05:22:05.126Z"},]}]},
result = {
...src,
data: src.data[0].pasien_docs.map(Object.values)
}
console.log(result)
.as-console-wrapper{min-height:100%;}
If you dont wanna use spread operator, this can also do the trick for you
const source = {"status":true,"message":"","data":[{"pasien_docs":[{"ecg":null,"date":"2020-01-21T05:22:01.901Z"},{"ecg":1.03,"date":"2020-01-21T05:22:02.979Z"},{"ecg":1.04,"date":"2020-01-21T05:22:04.053Z"},{"ecg":1.04,"date":"2020-01-21T05:22:05.126Z"},]}]}
const result = Object.assign({}, source, {
data: source.data[0].pasien_docs.map(Object.values)
})
console.log(result)
let obj = {
status: true,
message: "",
data: [
{
pasien_docs: [
{
ecg: null,
date: "2020-01-21T05:22:01.901Z",
},
{
ecg: 1.03,
date: "2020-01-21T05:22:02.979Z",
},
{
ecg: 1.04,
date: "2020-01-21T05:22:04.053Z",
},
{
ecg: 1.04,
date: "2020-01-21T05:22:05.126Z",
},
],
},
],
};
var finalobj = JSON.parse(JSON.stringify(obj));
var innerobj = obj.data;
var intermd = innerobj.map((data) => {
return data.pasien_docs;
});
finalarray = intermd[0].map((val) => {
return [val.ecg, val.date];
});
console.log(obj);
finalobj.data[0].pasien_docs=finalarray;
console.log(finalobj);

mongo update script: change fields in embedded documents

I am writing a script to update(add and rename) certain fields, which are part of an embedded document within the ones stored in the db collection.
to give an example document:
{
_id: UUID("025bda29-0d09-4923-8f7f-ea2e825be2c8"),
name: "test",
sets: [
{
"name": "1",
"values": [
{
name: "a",
value: 5
}
]
},
{
"name": "2",
"values": [
{
name: "a",
value: 3
}
]
}
]
}
This is my script:
function convertGroup (group) {
for (var i = 0; i < group.sets.length; i++) {
var set = group.sets[i];
var oldValuesField = "sets." + i.toString() + ".values";
var mainValuesField = "sets." + i.toString() + "mainValues";
var additionalValuesField = "sets." + i.toString() + ".additionalValues";
db.getCollection('group').updateOne({
"_id" : group._id
}, {
$set: {
mainValuesField : set.values,
additionalValuesField : [ ]
},
$unset: {
oldValuesField: ""
}
});
}
}
db.getCollection('group').find({'sets.0.mainValues': {$exists: false}}).forEach(convertGroup);
According to the documentation the $rename does not work on arrays, that is why I used set and unset.
what happens when I run this code, is that I get the mainValues field and additionalValues field in the group document, and not in the set documents.
this is what I want it to become:
{
_id: UUID("025bda29-0d09-4923-8f7f-ea2e825be2c8"),
name: "test",
sets: [
{
"name": "1",
"mainValues": [
{
name: "a",
value: 5
}
],
"additionalValues": [ ]
},
{
"name": "2",
"mainValues": [
{
name: "a",
value: 3
}
],
"additionalValues": [ ]
}
]
}
Can anyone explain to me why this happens and how I can make this work the way I want it to?
I managed to fix it by rewriting the script like this:
function convertGroup(group) {
group.sets.forEach(function (set) {
if (!set.mainValues) {
$set : {
set.mainValues = set.values
}
}
if (!set.additionalValues) {
$set : {
set.additionalValues = []
}
}
});
db.getCollection('group').update({'_id': group._id}, group);
}
db.getCollection('group').find({'sets.mainValues': {$exists: false}}).forEach(convertGroup)
the different is mostly not using the notation 'sets.[index].values' but editing it directly on the json and using 'update' instead of 'updateOne'

Changing js array on a html

I want to manipulate an js array after a click but its not triggering.
example is here
https://datatables.net/examples/data_sources/js_array.html
what did i do is: (i need to re set dataset which is loaded into table previously please take a look at above example)
$(document).ready(function() {
$(".retrievemenu").click(function() {
//alert( this.id );
//$('#menus').hide();
var restid = this.id;
data = [
["sasa", "a", "a"]
];
$.post("server.php", {
retrievemenu: 1,
restid: restid
}, function(data) {
console.log(data);
$('#menus').hide();
$('#menus').DataTable({
data: data,
columns: [{
title: "Restaurant Name"
}, {
title: "Menu Name"
}, {
title: "Actions"
}
]
});
$('#menus').show();
});
});
});

Ext JS Read JSON response before reader in Store

I have JSON response as below -
{
"success": true,
"data": {
"data": [
{
"resultsMap": {
"Title": "Test1",
"Name": "Test1"
},
"id": 1
},
{
"resultsMap": {
"Title": "Test2",
"Name": "Test2"
},
"id": 2
}
],
"total": 2
}
}
I am using a custom reader to extract the data. Problem is I loose the initial JSON response from the server from which I need to extract the "total". Can someone help me in getting the "total" from the json response?
var newStore = Ext.create('Ext.data.BufferedStore', {
pageSize: 2000,
fields:fields,
//leadingBufferZone:50,
//trailingBufferZone:50,
//autoLoad: {start: 0, limit: 2000},
remoteSort: true,
sorters: [{
property : 'name',
direction: 'asc'
}],
proxy: {
type: 'ajax',
url: 'getData.json',
reader: {
type: 'nestedjsonreader',
rootProperty: 'data',
totalProperty: function(data) {
//console.log(data);
return data.totalCount;
},
},
extraParams: {
id:ID
}
},
listeners: {
'load' : function(store, records, success, options){
//the complete response
console.log(store.getProxy().getReader().rawData);
}
}
});
Ext.define('Portal.model.NestedJsonReader', {
extend: 'Ext.data.reader.Json',
alias: 'reader.nestedjsonreader',
readRecords: function(data) {
var arr = data.data.data;
var data = [];
if(arr!=undefined){
for(var i=0;i<arr.length;i++){
var obj = arr[i].resultsMap;
data.push(obj);
}
}
return this.callParent( [ data ]);
}
})
Create a custom property in your store as resp_total and assign data.total to it.

Mapping Key value pair to javascript Object

I wanted to map data from the service call to java script object for same javascript object will be passed to the chart api
The single data format of the javascript array should be like this
var val2 = {
label: 'Data Seg2',
data: [[0, 10]]
};
it can have multiple data values also like this
var val3 = {
label: 'Data Seg2',
data: [[0, 10], [1, 20],[2, 30],[3, 40],[4, 50]]
};
Tha main Array looks like this
var datatest = [{
label: 'First Label',
data: [[0, 30]]
}, {
label: 'Second Label',
data: [[0, 20]]
}, {
label: 'Third Label',
data: [[0, 50]]
}, {
label: 'Fourth Label',
data: [[0, 10]]
}];
Now i have the service all result like this.
{"d":"[{\"label\":\"Lable1\",\"data\":[{\"Key\":\"0\",\"Value\":\"108859\"}]},{\"label\":\"Lable2\",\"data\":[{\"Key\":\"0\",\"Value\":\"20493248.94\"}]},{\"label\":\"Label3\",\"data\":[{\"Key\":\"0\",\"Value\":\"1195\"}]}]"}
Now i want to map this result to "datatest" format
How can i do this ?
Thanks in advance
You could use jQuery.map() function like this:
var serverJSON = {"d":"[{\"label\":\"Lable1\",\"data\":[{\"Key\":\"0\",\"Value\":\"108859\"}]},{\"label\":\"Lable2\",\"data\":[{\"Key\":\"0\",\"Value\":\"20493248.94\"}]},{\"label\":\"Label3\",\"data\":[{\"Key\":\"0\",\"Value\":\"1195\"}]}]"};
var serverData = JSON.parse(serverJSON.d);
var datatest= $.map(serverData, function(arrayItem) {
return {
label: arrayItem.label,
data: $.map(arrayItem.data, function(dataItem) {
return [[parseFloat(dataItem.Key), parseFloat(dataItem.Value)]];
})
};
});
Result is :
[{"label":"Lable1","data":[[0,108859]]},{"label":"Lable2","data":[[0,20493248.94]]},{"label":"Label3","data":[[0,1195]]}]
Working demo.
You data is a little bit strange, anyway...
var rawData = {"d":"[{\"label\":\"Lable1\",\"data\":[{\"Key\":\"0\",\"Value\":\"108859\"}]},{\"label\":\"Lable2\",\"data\":[{\"Key\":\"0\",\"Value\":\"20493248.94\"}]},{\"label\":\"Label3\",\"data\":[{\"Key\":\"0\",\"Value\":\"1195\"}]}]"};
var dataSet = JSON.parse(rawData.d);
var fn = function(data){
data.data = data.data.map(function(d){
return [d.Key, d.Value];
});
return data;
};
var newSet = dataSet.map(fn); // what you want
Result:
[
{
"label": "Lable1",
"data": [
[
"0",
"108859"
]
]
},
{
"label": "Lable2",
"data": [
[
"0",
"20493248.94"
]
]
},
{
"label": "Label3",
"data": [
[
"0",
"1195"
]
]
}
]
It will do the trick. Not sure if there is other elegant way to do so.
PS: it is recommended to format your json string first via http://jsonformat.com/ or so
with pure JavaScript you can do this:
mapthis = {"d":"[{\"label\":\"Lable1\",\"data\":[{\"Key\":\"0\",\"Value\":\"108859\"}]},{\"label\":\"Lable2\",\"data\":[{\"Key\":\"0\",\"Value\":\"20493248.94\"}, {\"Key\":\"1\",\"Value\":\"1111111.94\"}]},{\"label\":\"Label3\",\"data\":[{\"Key\":\"0\",\"Value\":\"1195\"}]}]"};
var x = eval(mapthis.d);
var newdatatest = [];
for(var i=0; i<x.length; i++){
var datas = [];
for(var j=0; j<x[i].data.length;j++){
datas.push([x[i].data[j].Key, x[i].data[j].Value]);
}
newdatatest.push( {label:x[i].label, data:datas} );
}
console.log(JSON.stringify(newdatatest,null,2));
Results:
[
{
"label": "Lable1",
"data": [
[
"0",
"108859"
]
]
},
{
"label": "Lable2",
"data": [
[
"0",
"20493248.94"
],
[
"1",
"1111111.94"
]
]
},
{
"label": "Label3",
"data": [
[
"0",
"1195"
]
]
}
]

Categories

Resources