Search code examples
jsonrestvue.jspropertiesdto

JSON object losing info between API call and Frontend

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)

enter image description here

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.

enter image description here

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.

Solution

  • 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,

    1. Vue doesn't throw errors on assignments in code that is used to generate frontend (where you should NEVER alter your data).
    2. 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.