We Keep Coding

How to return and access an object from a Javascript on a button post submitted?

I am working on a Javascript that aims to return then manipulate an object from a clicked button. I am now stuck how can i get its object then process it on a post method. On my button I have this:
<button type="submit" name="submit" form="form-add" id="export-btn" class="btn btn-small" style="border-radius: 0;"><i class="fas fa-save"></i><span class="button-save"></span>Save</button>
and i have this javascript method:
<script type="text/javascript">
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');
...
// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.click(function () {
var $rows = $TABLE.find('tr:not(:hidden)');
var headers = [];
var data = [];
// Get the headers (add special header logic here)
$($rows.shift()).find('th:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
// Turn all existing rows into a loopable array
$rows.each(function () {
var $td = $(this).find('td');
var h = {};
// Use the headers from earlier to name our hash keys
headers.forEach(function (header, i) {
h[header] = $td.eq(i).text();
});
data.push(h);
});
// Output the result
$EXPORT.text(JSON.stringify(data));
return data;
});
</script>
and on top of my page I have this:
if(isset($_POST['submit'])){
echo "Test";
// Process here the object
}
but How can i access those data, since $EXPORT.text(JSON.stringify(data)); output a JSON, that looks like this [{"id":"1","Val":"Sample","data":"Sample Date"}] on my paragraph tag.

You can't post data from paragraph.
Create hidden input in the form and assign the data to it.
$(this).append($("<input />", { name : "foo", value : data, type : "hidden" }))

Chart.js - Uncaught TypeError: Object.defineProperty called on non-object for multiple charts

I want to render multiple charts with same class name.The div with same class name contains canvas object.Most of the options are same but a few are different.I want to send them via data attributes.Everything is okay but when i am going to select canvas element on dom-object, it comes :
Uncaught TypeError: Object.defineProperty called on non-object
I dont know why it's happening.
Below is the html code
<td
class ="crypt-marketcap-canvas"
data-charts ="[65,59,81,81,56,55,40,80,90]"
data-bg = "d3f0df"
data-border = "8cd8aa">
<canvas />
</td>
and js codes are
var charts = document.getElementsByClassName("crypt-marketcap-canvas");
for( let chart of charts ){
let data = chart.dataset.charts;
// console.log(chart.dataset.charts);
let bg = chart.dataset.bg;
let border = chart.dataset.border;
let canvas = chart.querySelector('canvas');
// console.log(canvas);
let ctx = canvas.getContext('2d');
console.log(ctx);
let lineChartData = {
labels : ["1","2","3","4","5","6","7","8","9"],
datasets : [
{
backgroundColor : '#' + bg,
borderColor : '#' + border,
data : data,
bezierCurve : true
}
]
}
new Chart(ctx, { //Error is showing on this line
type:"line",
data:lineChartData,
options:options
});
}

Your issue here is that data is a string "[65,59,81,81,56,55,40,80,90]" which Chart can't understand.
If you do a JSON.parse it would work:
let data = JSON.parse(chart.dataset.charts);
That converts the data back to an array which, I guess, is your intention.
var charts = document.getElementsByClassName("crypt-marketcap-canvas");
for( let chart of charts ){
let data = JSON.parse(chart.dataset.charts);
// console.log(chart.dataset.charts);
let bg = chart.dataset.bg;
let border = chart.dataset.border;
let canvas = chart.querySelector('canvas');
let ctx = canvas.getContext('2d');
let lineChartData = {
labels : ["1","2","3","4","5","6","7","8","9"],
datasets : [
{
backgroundColor : '#' + bg,
borderColor : '#' + border,
data : data,
bezierCurve : true
}
]
}
new Chart(ctx, { //Error is showing on this line
type:"line",
data:lineChartData,
options: {}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<table>
<tbody>
<tr>
<td
class ="crypt-marketcap-canvas"
data-charts ="[65,59,81,81,56,55,40,80,90]"
data-bg = "d3f0df"
data-border = "8cd8aa">
<canvas />
</td>
</tr>
</tbody>
</table>
Extra
If you have any control on how data-charts is being written to the DOM I'd say avoid [ and just would do something like this:
<td
class ="crypt-marketcap-canvas"
data-charts ="65,59,81,81,56,55,40,80,90"
data-bg = "d3f0df"
data-border = "8cd8aa">
<canvas />
</td>
Then on your script: let data = chart.dataset.charts.split(','); leading to the same result.
Reason I recommend this is because JSON.parse can throw exceptions if something odd happens so you'd have to wrap within a try/catch block.

NgMap and Heatmap with async data

I'm having trouble consolidating NgMaps and the Heatmaps from Google Maps API.
If I load the data from a script tag, it works fine just like in the NgMap example.
But if I try to create the data array locally, it won't work and it will give me an invalid heatmap data <heatmap-layer id="foo" data="pointArray"> error.
The aim is to be able to update the array on the fly, and to update the map and the heatmap when necessary.
This is what I've tried so far:
HTML:
<ng-map center="21.088513,92.197204" zoom="16" map-type-id="SATELLITE" >
<heatmap-layer id="foo" data="pointArray"></heatmap-layer>
</ng-map>
AngularJS:
$scope.outbreak = [
[21.088, 92.19862],
[21.08866, 92.19874],
[21.08869, 92.19872],
[21.08865, 92.19875],
[21.08765, 92.19865],
[21.08752, 92.1981],
[21.08853, 92.19803],
[21.08883, 92.19724],
[21.08896, 92.19658],
[21.08888, 92.19656],
[21.08718, 92.19678],
[21.08965, 92.19624],
[21.08977, 92.19625],
[21.08958, 92.19656],
[21.08999, 92.19677],
[21.09024, 92.19709],
[21.09059, 92.19672],
[21.09092, 92.19645],
[21.09088, 92.19643],
[21.09083, 92.19574]
];
$scope.renderHeatMap = function() {
var heatmap, vm = this;
NgMap.getMap().then(function(map) {
var outbreakfin = [];
for (var i in $scope.outbreak) {
outbreakfin.push(new google.maps.LatLng($scope.outbreak[i][0], $scope.outbreak[i][1]));
};
var pointArray = new google.maps.MVCArray(outbreakfin);
heatmap = map.heatmapLayers.foo;
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
});
};
I get the feeling that the heatmap layer is not loaded when is it supposed to.
What am I missing?

You are getting the following error
invalid heatmap data
since pointArray array needs to be defined in scope of controller:
$scope.pointArray = [];
Secondly, there is no need to create the instance of HeatmapLayer:
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
since it is getting created within heatmapLayer directive and could be accessed from controller like this in your case:
heatmap = map.heatmapLayers.foo;
Modified example
angular.module('mapApp', ['ngMap'])
.controller("MapCtrl", function ($scope, $http, NgMap) {
$scope.pointArray = [];
$scope.outbreak = [
[21.088, 92.19862],
[21.08866, 92.19874],
[21.08869, 92.19872],
[21.08865, 92.19875],
[21.08765, 92.19865],
[21.08752, 92.1981],
[21.08853, 92.19803],
[21.08883, 92.19724],
[21.08896, 92.19658],
[21.08888, 92.19656],
[21.08718, 92.19678],
[21.08965, 92.19624],
[21.08977, 92.19625],
[21.08958, 92.19656],
[21.08999, 92.19677],
[21.09024, 92.19709],
[21.09059, 92.19672],
[21.09092, 92.19645],
[21.09088, 92.19643],
[21.09083, 92.19574]
];
$scope.renderHeatMap = function () {
NgMap.getMap().then(function (map) {
var outbreakfin = [];
for (var i in $scope.outbreak) {
outbreakfin.push(new google.maps.LatLng($scope.outbreak[i][0], $scope.outbreak[i][1]));
};
$scope.pointArray = new google.maps.MVCArray(outbreakfin);
heatmap = map.heatmapLayers.foo;
heatmap.setData($scope.pointArray);
});
};
$scope.renderHeatMap();
});
<script src="https://maps.google.com/maps/api/js?libraries=visualization"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="MapCtrl">
<ng-map center="21.088513,92.197204" zoom="16" map-type-id="SATELLITE" >
<heatmap-layer id="foo" data="pointArray"></heatmap-layer>
</ng-map>
</div>

Angularjs firebase array object always display false

Hi i having problem when i retrieve data from firebase in console.log($scope.statusbaca) it display 2 query true and false. but when it showing in the app it only display false. Sorry for my bad english. English is not my native language. Hope you understand my problem
App return false but console log display true and false
and this is my code
Template
<div ng-repeat= "item in users">
<div class="list card" style="padding:1%;">
<div class="col-50" style="float:left;">
<h5>{{item.displayName}} - {{item.handphone}}</h5>
<h5>{{item.email}}</h5>
</div>
<div class="col-33" style="float:right; position: relative;" ng-repeat = "datas in statusbaca">
<h5>{{datas}}</h5>
</div>
</div>
</div>
Controller
var rootRef = new Firebase('https://example-app.firebaseio.com/');
var childUsers = rootRef.child('users');
var childDate = rootRef.child('tanggal');
var rekapId = $stateParams.rekapId;
console.log(rekapId);
childDate.child(rekapId).child('tanggalBaca').once('value',function(snap){
$timeout(function() {
var snapshot= snap.val();
$scope.tanggal = snapshot;
console.log($scope.tanggal);
myAfterFunction();
});
})
function myAfterFunction(){
var dates = $scope.tanggal;
console.log(dates);
var rekapUsers = childUsers.on('value', function(snapshot){
snapshot.forEach(function(childSnapshot){
var key = childSnapshot.key();
console.log(key);
var childStatus = childUsers.child(key+'/status/'+dates);
childStatus.on('value',function(grandsnap){
var snapval =grandsnap.val();
$scope.statusbaca = snapval;
$scope.key = key;
console.log($scope.statusbaca);
console.log($scope.key);
})
})
var snapshotVal = snapshot.val();
$scope.users =snapshotVal;
console.log($scope.users);
})
}
Any idea what's wrong with my code and how to fix this? thanks

I'm not sure if this will fix it but your div elements are unbalanced.
You should add a ending div element like this,
<div class="col-33" style="float:right; position: relative;" ng-repeat = "datas in statusbaca">
<h5>{{datas}}</h5>
</div>
Also, I can't find some of the variables referenced by the HTML in the JavaScript and rather than having your
value output like this:
<h5>{{datas}}</h5>
you should have it like this:
<h5>{{datas.THE NAME OF YOUR KEY:VALUE PAIR}}</h5>
I can't test it since you're using firebase but, I would do quick run through with your code.

Angular, ng-grid and dynamically populating the grid

I am trying to populate an ng-grid after an AJAX call is returned. The user presses the button to perform a query, and the result is intended to be shown in a grid.
My html is:
<div class="gridStyle" ng-grid="gridOptions" ></div>
And my js is:
app.queryCallback = function(graph) {
var results = graph.toJSON();
var columns = [ns.gtry("hasRank"), ns.gtry("score"), ns.gtry("ks_up"), ns.gtry("ks_down")];
var names = ["Has Rank", "Score", "up", "down"];
$scope.queryData = [];
$.each(results, function(key, values) {
var row = {};
$.each(values, function(uri, dict){
$.each(columns, function(i, column){
if (column == uri) {
row[names[i]] = dict[0]['value'];
}
});
});
$scope.queryData.push(row);
});
$scope.gridOptions = {data : 'queryData'};
$scope.$apply();
}
and my controller is set up as follow:
goiapp.controller('goip', function ($scope) {
var app = this;
However, the grid isn't shown, and with the chrome debugger, I have verified that app.queryData has the correct objects.