We are attempting to dynamically generate a JSON object using a for loop. The intended result should resemble the following:
posJSON = [
{
"position": [msg[0].Longitude, msg[0].Latitude],
"radius": 0.05,
"color": [255, 255, 0, 255]
},
{
"position": [msg[1].Longitude, msg[1].Latitude],
"radius": 0.05,
"color": [255, 0, 0, 255]
}
]
When we manually create the object with the provided code above, everything works as expected. However, when we try to dynamically generate the object like this:
for(i=0; i < Object.keys(msg).length; i++) {
posJSON.push({
"position": [msg[i].Longitude, msg[i].Latitude],
"radius": 0.05,
"color": [255, 255, 0, 255]
});
}
it does not function correctly. There seems to be an issue with the syntax, but we are having trouble pinpointing the error. Any assistance in resolving this matter would be greatly appreciated.
Below is the complete code snippet of the function:
import React, {Component} from 'react';
import DeckGL, {PathLayer} from 'deck.gl';
import DeckGL, {ScatterplotLayer} from 'deck.gl';
import $ from 'jquery';
var tableJSONStringed = null;
var posJSON = [];
//Position tracker
window.setInterval(function(){
var request = $.ajax({
url: "https://nedo93.000webhostapp.com/phpgetcoords.php",
method: "POST",
dataType: "json"
});
request.done(function( msg ) {
tableJSONStringed = JSON.stringify(msg, null, " ");
var count = Object.keys(msg).length;
//CYCLE
for(i=0; i < Object.keys(msg).length; i++) {
posJSON.push({
"position": [msg[i].Longitude, msg[i].Latitude],
"radius": 0.05,
"color": [255, 255, 0, 255]
});
});
request.fail(function( jqXHR, textStatus ) {
//alert( "Request failed: " + textStatus );
});
}, 5000);
export default class DeckGLOverlay extends Component {
static get defaultViewport() {
return {
longitude: 11.25,
latitude: 43.77,
zoom: 16,
maxZoom: 18,
pitch: 40, //viewport tilt
bearing: 0
};
}
_initialize(gl) {
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
}
//Add in const { }, new layers's ID
render() {
const {viewport, scatters, pos, icon, paths, trailLength, time} = this.props;
//Add another instance of a new layer here:
const layers = [
new ScatterplotLayer({
id: 'scatters',
data: scatters,
radiusScale: 100,
outline: false
}),
new ScatterplotLayer({
id: 'pos',
data: posJSON,
radiusScale: 100,
outline: false
}),
new PathLayer({
id: 'paths',
data: paths,
rounded: true,
getColor: paths => [255, 0, 0, 255],
getWidth: paths => 0.03,
widthScale: 100
})
];
return (
<DeckGL {...viewport} layers={layers} onWebGLInitialized={this._initialize} />
);
}
}
For reference, the console output while running the for loop can be viewed here.