Add Event Listener to Array index - javascript

I have an array that is being filled on page load by D3. I want to access that same array at another time but I still need to confirm that it has been loaded.
I don't know the propper way to do this so I just guessed a few time and I kept getting "not a function" errors
First Code (populate my svg, snapshot of current values)
d3.tsv("file.txt").then( function(data) { Loaded_Data[1]=data; document.getElementById("valve1").innerHTML = data[data.length-1]['OnOff']; //etc
});
much later, but still in a relevant timescale of async, I want to do some d3 graphing with this data, but I want to make sure that there is data in my array.
Later Code (populate graphs, weeks of data)
Loaded_Data[1].addEventListener('load', () => {console.log("success"); //d3.graphing; });
I basically want a:
while (array[1] is undefined){ Listen; }
when done => graph;
Or would it just be easier to load the entire set of documents again in another d3.tsv().then()? it seems like a waste of resources to reload the entire data. What makes this difficult is the number of sources I have to load in, and consolidating my data into one array will be (hopefully) more convenient.

just graph in the then call after you read the data:
d3.tsv("file.txt")
.then(data => graph(data)); //data is available to be used at this point
also, if I'm reading this correctly, you are listening for the array to be populated with the load event, but that is only fired when the whole page is loaded and isn't relevant to the populating of a data structure. If you need the data stored somewhere in addition to graphing, you could modify the above to:
d3.tsv("file.txt")
.then(data => {
graph(data);
myArray = data;
});

Related

Ag-grid: duplicate node id 107 detected from getRowNodeId callback , this could cause issues in your grid

I am going to do live data streaming on ag-grid datatable, so I used DeltaRowData for gridOptions and added getRowNodeId method as well which return unique value 'id'.
After all, I got a live update result on my grid table within some period I set, but some rows are duplicated so I can notice total count is a bit increased each time it loads updated data. The question title is warning message from browser console, I got bunch of these messages with different id number. Actually it is supposed not to do this from below docs. This is supposed to detect dups and smartly added new ones if not exist. Ofc, there are several ways to get refreshed data live, but I chose this one, since it says it helps to persist grid info like selected rows, current position of scroll on the grid etc. I am using vanilla js, not going to use any frameworks.
How do I make live data updated periodically without changing any current grid stuff? There is no error on the code, so do not try to speak about any bug. Maybe I am wrong with current implementation, Anyway, I want to know the idea or hear any implementation experience on this.
let gridOptions = {
....
deltaRowDataMode: true,
getRowNodeId = (data) => {
return data.id; // return the property you want set as the id.
}
}
fetch(loadUrl).then((res) => {
return res.json()
}).then((data) => {
gridOptions.api.setRowData(data);
})
...
If you get:
duplicated node warning
it means your getRowNodeId() has 1 value for 2 different rows.
here is part from source:
if (this.allNodesMap[node.id]) {
console.warn("ag-grid: duplicate node id '" + node.id + "' detected from getRowNodeId callback, this could cause issues in your grid.");
}
so try to check your data again.
if u 100% sure there is an error not related with your data - cut oof the private data, create a plinkr/stackblitz examples to reproduce your issue and then it would be simpler to check and help you.

How to update d3 graphics if I load from external data?

So I haven't been able to find an example. I'm loading this huge dataset from an external file with D3, and I'm making some graph with some part of the data. When a slider is moved, I wish make the same graph with some other part of the data.
I used d3.json() for loading the data. The trouble that I'm facing is: since the d3.json() is asynchronous, it loads the dataset for once, and then I can't access it from other functions. I can't have another update function that makes a new graph since I simply can't access the data anymore.
Other people's suggestions have been "only using the data in the d3.json() function: How to store a JSON object loaded from a file?
d3.json("temp.json", function(data){
//use data here
})
// do not use data anymore
I tried to use a variable to store the data (the second answer from the same question link above):
var DATASET; // global
d3.json("file.json", function(data) {
DATASET = data;
//any other functions that depend on data
});
d3.selectAll().data(DATASET).......
And I couldn't get it to work at all, since (I assume this is the reason) the data hasn't been loaded to DATASET when the last line of d3.data calls DATASET
Is there any way I could update external data in d3? Should I just load the data again in my update function? Will it affect performance since the dataset is huge?
Thank you so much for answering!
If you want to read all the data once, you should store it in your global DATASET variable, just as you show in your code fragment. But instead of placing the update logic in your main script flow, put it inside an update(...) function, and call that from the d3.json callback, too... something like this (untested):
var DATASET; // global
d3.json("file.json", function(data) {
// data is loaded, save the full set
DATASET = data;
// filter the initial subset
var subdata = data.filter(...);
// now update the graph
updateGraph(subdata);
});
function updateGraph(data) {
// when invoked without any data, use the full dataset
var newdata = (data == null ? DATASET : data);
// data rendering logic starts here...
d3.selectAll().data(newdata);
...
}
This saves the full dataset in a global variable, draws the inital graph with a filtered subset of the data, and also allows you to change which data is shown by using a different filter before calling the function again.

Updating the cart number in Shopify with AJAX

Apologies if this is somewhere else but I can't find a better way of doing this.
I want to update the cart total number in realtime with AJAX anytime a product is added, removed, or quantity is changed.
I have it working but there has to be a better way. It feels wrong to poll constantly for changes and I certainly don't want to end up with a memory leak.
Right now I have the item count being fetched from JSON and then changing the number in the div by polling every second, giving the user the illusion that the number is being updated when they change something.
I've tried adding a listener to the add to cart button (works) as well as listening on the quantity selector (doesn't work).
I'm sure I'm just being a noob so any help is appreciated. Code below:
// Fetch the cart in JSON and change cart quantity on the fly after first product added to cart
function doPoll(){
setTimeout(function() {
$.getJSON('/cart.js', function(cart) {
$('.cart-count').html(cart.item_count);
doPoll();
}, 1000);
}
Update
So the fix was actually very simple. The reason I couldn't attach a listener on a particular element within the cart was the cart wasn't loaded yet via ajax (duh!)
So all I did was remove the constant polling and instead ran my function anytime the ajax on the page was fully loaded:
$( document ).ajaxComplete(function() {
//Do stuff here
});
Actually it's even simpler. If an ajax driven cart adjustment happens Timber gives you an overridable hook. Just override ShopifyAPI.onCartUpdate
e.g.
ShopifyAPI.onCartUpdate = function(cart){
//do something new with the cart contents
$('.cart-count').html(cart.item_count);
};
Other than that your cart count is also available on page load via liquid so if you combine the two you're covered:
<div class="cart-count">{{ cart.item_count }}</div>
If you have not implemented any other way to add to cart, it's very simple.
If you look in the AJAX functions file you have mentioned, especially in functions at lines 101 and 113, you can see that those function are related to cart update. Add your code $('.cart-count').html(cart.item_count); before callback(cart); and you'll be good to go.
A more up to date solution without Jquery. You can use fetch and then use the data returned to populate the cart count.
fetch('/cart.js')
.then(response => response.text())
.then((responseText) => {
data = JSON.parse(responseText);
var counterEl = document.querySelectorAll('.js-cart-item-count');
counterEl.forEach((element) => {
element.innerHTML = data.item_count
})
})

javascript/jQuery is automatically updating data in div after data is retrieved

I am building a Ruby on Rails application where I am performing an Ajax request to retrieve some data, perform calculations on it, and place it on the page. The page is going to be performing these calculations every 30 seconds or so on new data from the database, so this means I need to keep the original data from the Ajax request intact. When I'm retrieving the original data, I'm placing it in a div using jQuery like so:
$('#info').data('original', data);
and then taking that data object and running said calculations on it. After the calculations are complete, I place it in a separate data attribute in the same div like so:
$('#info').data('modified', data);
The data in the 'modified' attribute goes to the page, and when the time has come, it pulls the new data from the database, the original data from the div, gets passed to a method for calculating, and then is placed back in the 'modified' attribute for being displayed on the page:
function calculate(data) {
// doing some stuff here
$('#info').data('modified', data);
}
var data = $('#info').data('original');
calculate(data);
All of this is working just fine, however when the very first calculation is being ran, it seems that the 'original' attribute in the div is being overwritten with the data that has been calculated, even though I'm not explicitly telling it to do so. Does anyone have any insight on why this could be happening?

initializeLayout and asynchronous loading

Currently I'm loading data asynchronously via data.js as provided by the Grid app template. The problem exists where groupedItems.js (the "Hub" page) calls _initializeLayout in the ready handler before the Data in the global WinJS namespace is set due to the asynchronous nature of the StorageFile class.
In data.js:
fileNames.forEach(function (val, index, arr) {
var uri = new Windows.Foundation.Uri('ms-appx:///data/' + val + '.geojson');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).then(function (file) {
Windows.Storage.FileIO.readTextAsync(file).then(function (contents) {
// ... read, parse, and organize the data ...
// Put the data into the global namespace
WinJS.Namespace.define("Data", {
items: groupedItems,
groups: groupedItems.groups,
getItemReference: getItemReference,
getItemsFromGroup: getItemsFromGroup,
resolveGroupReference: resolveGroupReference,
resolveItemReference: resolveItemReference
});
});
});
}
In groupedItems.js:
// ...
// This function updates the ListView with new layouts
_initializeLayout: function (listView, viewState) {
/// <param name="listView" value="WinJS.UI.ListView.prototype" />
if (viewState === appViewState.snapped) {
listView.itemDataSource = Data.groups.dataSource;
listView.groupDataSource = null;
listView.layout = new ui.ListLayout();
} else {
listView.itemDataSource = Data.items.dataSource;
listView.groupDataSource = Data.groups.dataSource;
listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
}
},
// ....
Seeing as I cannot move this code out of this file into the done() function of the Promise in data.js, how do I make the application wait until Data is initialized in the WinJS namespace prior to initializing the layout?
You have two asynchronous operations in progress (loading of the data and loading of the page) and one action (initializing the grid) that needs to happen only after both asynchronous operations are complete (page is loaded, data is available). There are a lot of approaches to solve this depending upon what architectural approach you want to take.
The brute force method is that you create a new function that checks to see if both the document is ready and the data is loaded and, if so, it calls _initializeLayout(). You then call that function in both places (where the doc is loaded and when the data is available) and it will execute only when both conditions are satisfied. It appears that you can tell if the data is loaded by checking for the existence of the global Data item and the its relevant properties.
There are more involved solutions that are architecturally a little cleaner. For example, in your doc ready handler, you can check to see if the data is available yet. If it is, you just initialize the layout. If, not you install a notification so that when the data is available, your callback will get called and you can then initialize the layout. If the data loading code doesn't currently have a notification scheme, then you create one that can be used by any client who wants to be called when the data has been loaded. This has the advantage over the first method in that the data loading code doesn't have to know anything about the grid. The grid does have to know about the data - which makes sense because the grid requires the data.
There are surely ways to use the promise/done system to do this too though I'm not personally familiar enough with it to suggest a good way to do it using that.

Categories