Most of the examples that I see of Stimulus are calling an external API on client side in the browser JS code.
In our case we do a server side calling of an API and get the response.
Does Stimulus have a method to take in these response variables that can then be injected as targets in the HTML code?
Stimulus would not be able to access anything that wasn’t in the page HTML itself. You would need to have your server update the page, probably through a TurboStream response, and then Stimulus would see the DOM mutate, and respond to that.
Hope this helps,
Walter
Got it, do you have any examples around it? Most of the examples I see are of Rails. We have a simple JSON response coming from an external API.
Tell me more about how your server is calling that API. Is it getting and interpreting the response from the API server? Could you flesh out the problem a little more? Is this JSON you get back (at the server, presumably) something that only the page would “care” about, or is it something your server needs to interpret or transform for the page?
Yes we have a server that gets the response from a third party API server. The JSON that comes back from the server would be used to update certain components on our client side HTML page. It’s an e-commerce website so we are looking to update the rating, price fields etc.
We tried using Stimulus and it works great, but the only problem is we have to write the replacement logic on the client side HTML to update our targets. We were thinking if there is a way to directly send the data over to the client and update the target without having to write so much code on the client side.
connect() {
this.injectData();
}
injectData() {
this.ratingsTarget.textContent = jsonData.ratings
}
We have a data-controller around the parent div
<div id="parent" data-controller="ourpage">
and then add a target to the ratings <span>
<span id="reviews" data-ourpage-target="ratings"
Have a look at the TurboStreams documentation. That’s an excellent way to update sub-page elements without a refresh. If you have an element on the page which has an ID already (doesn’t need to be identified with a Stimulus controller, but that won’t hurt anything) then the server can update that element directly. If you have multiple elements that will take the same value, you can target them with something looser than an ID (think common classname – really any sort of scheme you can think up) and set them to update. You can either have a template with the turbo_stream content-type, or there are controller methods you can call without a template. What happens under the hood is a template is added to the page (which changes the DOM, but not the visible page) and then Turbo replaces whatever that template is identified as replacing (or updating, or inserting).
Walter
Yes I was wondering if Turbo Streams are the way to go, will take a look. I did take a look earlier, but the documentation wasn’t detailed enough and was hard to follow.