search

dsfai2020 / Task-and-Nutrition-Manager

An agile planning application that tracks tasks, ideas and nutrition goals. This app is designed to assist with everyday productivity, progress tracking and fitness.
1 stars 0 forks source link

Trying to pass an array containing dictionaries as props to a StoryUiComponent with Mapping isn't working #69

Closed dsfai2020 closed 3 months ago

dsfai2020 commented 3 months ago

Describe the bug The data that was passed into the state object wasn't parsed before it was sent. So what passed to my state object was a actually an array containing a STRING version of the dictionary. The keys were properly created by cycling and filtering through the local storage using a criteria but when I assigned the values I didn't parse it.

To Reproduce Steps to reproduce the behavior:

  1. Go to the browser press Control Shift i while the react app is running. Press control R to refresh the page.
  2. Click on console.
  3. Scroll down to the bottom of the page and take a look at the UI that generated. Also view the console logs.
  4. See error that the UI is generating a STRING. See that the way that the information was saved was as a string and not a dictionary. It LOOKS like a dictionary but there are 'quotes' around it.

Expected behavior What I would like have to happen is that based on the length of how many dictionaries are within my object, I'd like my Ui Component to render. But I want to pass parameters that were saved from the local storage. I accessed those parameters and filtered them into a single array containing keys and values. I made it so that the key was actually the name of the ui as they were generated. But I need the values to be accessible when I drill into the object further. The reason is so that I can have the UI ultimately regenerate itself if there are records in the local storage already present. I want the parameters to line up any changes that are made to those UI are actually happening to the right ones. I don't want to create additional UI with partial data that isn't inheriting the props that are provided from the localstorage.

Screenshots image

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Though I am able to access the initial keys of my objects the content within those keys aren't actually dictionaries. So the entire string just gets pulled into it. If you take a look at the picture you can see that the example I ran just rendered in a string dictionary over 3 iterations that I'd manually setup. The assignments happened mostly in a useEffect and work around some trigger points that are in the picture.

dsfai2020 commented 3 months ago

[RESOLVED] image image image

dsfai2020 commented 3 months ago

A lot of the code needed to be restructured. I was using too many different variables to apply 'clones' of the data to in an attempt at being able to both test and capture the data from the local storage. I went back into the original if statement and decided to work from here. I created two simple a and b items. A was for actually executing the getItem for command for the local storage. Something that had gotten lost in the was further up the code. I'd almost forgotten about it entirely and was trying to actually copy the data from an iteration of the local storage without actually grabbing it by the key. I was able to combine my filter, the if statement that checked for a string inclusion of uiBackEnd, with the getItem command by simply referencing the each variable. Being able to iterate through the local storage was just one part of the process. Actually grabbing the information properly was another.

What actually tipped me off was the fact that my tests were failing whenever I tried to pass in a dictionary with in quotes that didn't have its KEYS in quotes. It looked something like '{key1: 'value1'}' And what I needed to do was actually apply the quotes to essentially everything in there. I also needed to use double quotes on things within the keys and values. With a singular quote on each side of the dictionary. It looked more like this: '{"key1": "value1"}'

This reminded me that the local storage had used stringify prior to it being stored there. The local storage holding a string representation of an object. So it threw me a really confusing error because If I cycled through the local storage like my code shows above, I was technically able to access the keys because using a mixture of array/dictionary access points. But No matter what I did I'd still eventually end up with Object Object or something along that nature. When I tried to access the layer that I needed it, I switched to using an array[] technique and all I began accessing were letters. This let me know that the data wasn't actually saved a dictionary within a dictionary but was just a string version of it.

SO to fix this... I went back in and made sure that I PARSED the data (rebuilding the object with JSON from the string that it was) back into something that could be handled and accessed using its keys. Once that happened, I was able to place that object into my deliveryList which was technically just a state object that held a list. Instead of using a setDeliveryList I simply deliveryList.push() my data that had been parsed to it. This worked for me so I went with it so that I could resume focus on the data just being pushed to where it needed to be. I figured that I'd fine tune this later if It gave me any problems. So after this happened I checked my logs making sure that the deliveryList held all of my Objects.

Once that was the case I knew that I could map it (since map iterates through the list) I figured that I'd return a StoryUiComponent each time it did and that I'd be able to pass in 'props' to it using item.keys to access any of the values that I needed from it. I then refreshed my page and ran a couple different tests without any local storage, with local storage, manually entering in local storage and made sure that it only pulled in the data that contained anything that started with uiBackEnd in its key.

I thought about nesting multiple dictionaries into 1 key called 'uiComponents' but I didn't want to do that just yet. I wanted to be able to sort through the storage. If working with python on the backend in a live DB I know that I'll be able to run returns with json so this entire experience gave me even more awareness about how strict the data types are when working with JSON. Especially when passing data from a backend to a frontend that will then pass that information as props to a UI. The idea is to keep the whisper the same as you pass it down the chain of different people at the table.