I'm using useContext and setState hooks to share an array of audiotracks across my site. i have a few playlist components which can add/remove tracks to the global playlist as well as a wrapper for the audio element that can e.g. retrieve next track when current finishes.
The playlists all use the same Component. Each Track is basically just a <tr> with <td>s containing id,title,url.. and so on. I generate these using json.
Now my question is what should I pass around in my hooks? Because I see at least 3 options... I could pass the
passing track_id seems most efficient but.. but whenever I need the tracks data.. e.g. to get the url or to render I need to find the object which could be anywhere nested in my json backend.
passing the dom-node seems wrong... but would be very easy to use in case i want to render the list somewhere else.
if you pass the track json object.. I have all the data I need at any point.. but i somehow need to attach it to all track dom nodes.. and that again seems not right too..
Option #1. track.json object
{"title":"...","artist":"...","year":"..."}
Option #2. <tr> dom-node
<tr><td>title</td><td>arist</td><td>year</td></tr>
key={track_id}
Now I would obviously like to follow best-practice and be as efficient as possible.. so can somebody point me in the right direction
I think all will do the same thing. If you pass an id or json then it will still need to be rendered in a dom node to be viewed, so when you say pass a dom node your really just passing a string. Am I correct in saying that no matter what is passed it will need to go through some sort of function to get the song from the back end? If so, then my suggestion would be json.
Related
I'm making a website that gets its info from a RESTapi I've written and hosted myself, have had no data problems thus far.
Now I'm trying a simple retrieve of a json object and I get all the info correctly as shown here in the API. (Visualized & tested in Swagger)
As you can clearly see, it retrieves it the complete object and underlying objects correctly (blurred sensitive info).
Pay attention to the property "AmountOfEggs" though.
Now when i call this api endpoint (exactly the same way) in my site and console.log the result.data, this is the feedback.
Now for some reason I can't recieve AmountOfEggs in my frontend.
I've recreated the entire object, wrote different names, passed different props (Id, NumberBus, etc are passed in this situation with no problem, which are also int (number) types).
I have no idea why this property gets "dropped" in the transfer and filled with/defaults to an empty string.
Any help would be greatly appreciated.
I found where it went wrong and it's due to different factors.
To start, I am making this site using the Vue framework, which has reactive components, which means, data gets adjusted and you get live updated components on your views/pages.
In the page that contained the call, I also wanted to add dynamic styling. The code I used for this is the following:
v-for="seller in retrievedSellers"
:key="seller.Id"
:class="[
'sellerStyle'
, (seller.AmountOfEggs = 0 ? 'grey-out-seller' : ''),
]"
Now two things to note, first of all this might look like backend coding but this is Vue logic on the .vue file which handles the dynamic options that Vue provides so I never thought to look here for the error.
The error of couse is the 'seller.AmountOfEggs = 0' part, using one equal sign (assignment) instead of two (comparison).
So I learned,
Vue doesn't throw errors on assignments in code that is used to generate frontend (where you should NEVER alter your data).
My console.log was the moment the response of the API came in, where apparently it was already assigned a new value (due to my code above) before hitting the console.log.
It still greatly surprises me that Vue handles ^this^ first to make sure your reactive components are up to date before finishing the api call itself.
However, I still don't understand how it said "" instead of 0.
I'm using typescript (javascript strongly-typed) so it definitely wants to contain a number and not an empty string. Even in the declaration of my DTO the property is defined as (and expects) a number.
I'm working in Node Red and I need to understand how to loop JSON object and, for each JSON object, make a HTTP request towards another endpoint.
In other words: here's the use case I will need to represent.
Node Red makes a HTTP post to get all devices.
All devices are returned in a JSON, with several information and a DEVICE_ID.
For every device ID, Node Red has to make another HTTP request passing the above id, to get all the resources for that device.
I'm in trouble since I expected Node Red to have a dedicated block for loops, but is not like that. So how can I make a workaround?
If I use the "function" block, and I type there the code to make my loop, how to "come back" to the flow view, using Http blocks? Thank you!
In flow-based programming, you tend to avoid loops. The most "flow like" approach would be to split the JSON output into multiple messages.
If you are familiar with JavaScript, the easiest way to do this is with a function node. In the JS code, create a loop over the JSON and within the loop, use node.send(msgobject) to output a new message. You can remove the normal return msg at the end of the code as you don't need it in this instance. Obviously, you have to create your msgobject for each loop instance (or create it inline). When the loop exits and you reach the end of your function node code, Node-RED will continue on to the next node in the flow, you don't need to do anything special.
Otherwise, you can use the core split node (or one of the contributed split nodes) to split the data into multiple messages.
Some specialized nodes exist for this purpose, for example node-red-contrib-loop.
I've written a presentational component (https://github.com/studioraygun/react-dropdown-list) but now I want to use it in another project I've hit a stumbling block.
I want a show a list of data which comes from an API but the data is formatted very differently to what the component expects. I think I have two options:
1) Write a sub-component which lets me generate the actual list using the map function
2) Find a way to "alias" or rename the array keys being sent by the API
Neither approach feels ideal, and I wondered if there might be a more sensible way?
So I am trying to find the most direct point to do a 'Get' from an API when a page loads. As an example, if in my app I go to "#/somepage", when I click on the link to do so, it also does a get from "http://{{host}}/api/common/trans/claim". That URI contains a single property with no name that looks like " "Bzc5YUL7dNjK6ApxpNK1XB%2bDtTU8cw7xRSGpjZ4XRuE%3d" ". So if I fire or add some listen event to this, what is the best way to store? I know that might be a seperate question, but legitimate here because of how the data is returned. Hopefully I provided and storied my question correctly.
My queries have pointed to things like viewContentLoaded and DOM readiness, etc..., but those seem overkill for this when simply clicking a link an retrieving info from the API.
Keep in mind, this API is local and private and the URI data is only available until after the user is logged in.
I'm not if I follow your question but you can fire the function using the ng-click directive.
To store the return value you could set it to the $scope of your controller or save it to a service if you'd like to share the data across controllers.
Here's my question: How might I try to get rid of the 'skipping precaching' and cache everything that comes in from https://laoadventist.info/beta/r as the precache list?
Also, is it correct for me to set precache="https://laoadventist.info/beta/r" or should I be setting that to a function that grabs the data and returns it instead?
Skipping precaching: Cannot read property 'concat' of null
comes out on the console when using My Polymer App
<platinum-sw-cache default-cache-strategy="fastest" cache-config-file="cache-config.json" precache="https://laoadventist.info/beta/r">
I am assuming correctly I can precahce a URL like this, right?
I am trying to load a json result from laravel 5.1 to set what my precache should be... I know it's not the most elegant, but I'm new to Polymer, cache, service workers, etc, and using this app as a learning opportunity. It'll be a bit different at the end of the day, but for now I just want to load everything. :)
I want to precache all of the data so that a user can fully utilize this app when offline (though later I'll set it up so that they don't have to precache loads and loads of json requests, only the ones they want, like per book - but that's for later).
If you have a array of resource URLs that you want precached, the cleanest way to specify them is to use the cacheConfigFile option and to point to a JSON file that contains your array as its precache property. Take a look at the example in the docs for cacheConfigFile: https://elements.polymer-project.org/elements/platinum-sw?active=platinum-sw-cache
You shouldn't have to use the precache attribute on the element if you're using cacheConfigFile.
It sounds like you're using Polymer Starter Kit, and that will create the JSON config file and populate it for you with an array corresponding to your local resources. But if you'd like to specify additional resources to be precached, you can modify the build process to append those URLs to the auto-generated list.
The reason you're seeing that error is because you're pointing to a JSON config file that is effectively empty, and is just meant for the development environment.