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?
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 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.
I have java library that runs webservices and these return a response in XML. The webservices all revolve around giving a list of details about items. Recently, changes were made to allow the services to return JSON by simply converting the XML to JSON. When looking at the responses, I saw they're not as easy to parse as I thought. For example, a webservice that returns details about items.
If there are no items, the returned JSON is as follows:
{"ItemResponse":""}
If there is 1 item, the response is as follows (now itemResponse has a object as value instead of a string):
{"ItemResponse":{"Items":{"Name":"Item1","Cost":"$5"}}}
If there two or more items, the response is (now items has an array as value instead of an object):
{"ItemResponse":{"Items":[{"Name":"Item1","Cost":"$5"},{"Name":"Item2","Cost":"$3"}]}}
To parse these you need several if/else which I think are clunky.
Would it be an improvement if the responses were:
0 items: []
1 item: [{"Name":"Item1","Cost":"$5"}]
2 items: [{"Name":"Item1","Cost":"$5"},{"Name":"Item2","Cost":"$3"}]
This way there is always an array, and it contains the itemdata. An extra wrapper object is possible:
0 items: {"Items":[]}
1 item: {"Items":[{"Name":"Item1","Cost":"$5"}]}
2 items: {"Items":[{"Name":"Item1","Cost":"$5"},{"Name":"Item2","Cost":"$3"}]}
I'm not experienced in JSON so my question is, if you were a developer having to use these webservices, how would you expect the JSON resonse to be formatted? Is it better to always return a consistent array, even if there are no items or is this usually not important? Or is an array not enough and do you really expect a wrapper object around the array?
What are conventions/standards regarding this?
Don't switch result types, always return an array if there are more items possible. Do not mix, for 1 item an object for more an array. That's not a good idea.
Another best practise is that you should version your API. Use something like yoursite.com/api/v1/endpoint. If you don't do this and you change the response of your API. All your client apps will break. So keep this in mind together with documentation. (I've seen this happen a lot in the past..)
As a developer I personally like your second approach, but again it's a preference. There is no standard for this.
There are several reasons to use json:
much more dense and compact: thus data sent is less
in javascript you can directly access those properties without parsing anything. this means you could convert it into an object read the attributes (often used for AJAX)
also in java you usually don't need to parse the json by yourself - there are several nice libs like www.json.org/java/index.html
if you need to know how json is build ... use google ... there tons of infos.
To your actual questions:
for webservices you often could choose between xml and json as a "consumer" try:
https://maps.googleapis.com/maps/api/place/textsearch/json
and
https://maps.googleapis.com/maps/api/place/textsearch/xml
there is no need to format json visually - is it not meant for reading like xml
if your response doesn't have a result, json-service often still is giving a response text - look again at the upper google map links - those are including a response status which makes sense as it is a service.
Nevertheless it's the question if it is worth converting from xml to json if there isn't a specific requirement. As Dieter mentioned: it depends on who is already using this service and how they are consumed ... which means the surrounding environment is very important.
I am using Sencha GXT3 app for a html interface. Data is retrieved in json format from a REST service. How exactly do I fill a store with a single object for reading and later manipulating and saving?
This is not about lists of objects, but really a specific single json map which I want to load into a store.
Any help would be highly appreciated.
For Stores you have basically two choices list or tree. Right? GXT 3 store api
You say it's not a list so did you see the src of their json tree example
Personally for a single object, I use a list. I mean it's a list of size 1. json list example
Of those two examples, json tree example is easier to understand since it's not using a grid I think. There are tree grid examples too but none I immediately see with json.
This is for version 3. I see no reason why you'd want to start with 2 since 3 is much more similar to native gwt and you can mix 2 and three code (see their tutorial) until you get everything ported to the newer version. Just saying ...
Is it possible to populate grid with some of the JSON data and a form with other, from the same JSON? Two stores or two models or both? simple example... ;-)
Yes, the best way to do this would be to manipulate the reader, which as well as returning records, also stores whatever the raw json sent from the server is.
The easiest solution would be to specify the reader parameters for your grid, but then have a listener on the store, which then processed the rawData property from the reader to get the additional values for your form.
Of course if your form data is related to the grid data, you may do better to rely on nested loading and form.loadRecord in the store's load event handler. See the Ext samples (form and grid data binding example) for wasy of doing this.
Depending on the circumstances, another approach similar to the Ext FAQ would be to handle the Ajax through a simple Ext.Ajax.Request, and this process the json through two stores with local proxies, but this doesn't seem quite so Ext4 data model friendly to me.