I want to make a forums in Angular JS for which I want to make few JSON data files where I can store and get data from. Some of the problems to keep in mind.
I want to add new data from the browser not adding it to the data file directly. Thank you for the assistance
If you're just dealing with small amounts of data, JSON is fine, but if your datasets get large, definitely switch to a database like MongoDB or DynamoDb.
In the browser you can use LocalStorage to store your JSON payloads and you can access using a plugin like lawnchair:
http://brian.io/lawnchair/
Related
I'm working on a data mining web app, you should be able to upload a csv file, apply an algorithm and get results in the browser and a pdf with information (graphs and models for prediction principally) this is my first time using React and Django, so my question is, how to send the csv file from react to django, handle the data and return it to react?
Thanks!!
I've seen a lot of tutorials, but every tutorial use the sqlite data base and the POST method for store data and I only want to process the data inside the csv, because the files will never be the same.
You can do the csv file upload via a HTTP POST request with the {"Content-Type": "multipart/form-data"} header. After that, you can read the file with some python library that handles datasets like pandas, process everything you want about it and then send it back to the client. After that you can delete your file.
Depending of the time of this operation this request can become really slow, though.
I also think there is probably a cleaner solution where you dont even need to utilize the filesystem, just manipulate the file in-memory that came from the request, but i never tried to do something like that in django.
I have created a website that uses a large amount of data from the server, it slows down the display of data, I want to know what is the best way to save the data in the cache for reactjs and update it only if there is a change in data base thanks
There are lot of strategies that you can use to cache data:
Use a library like React Query or Relay that automatically caches data
Use a library like redux-persist along with redux to cache data.
Alternatively, if performance is impacted because you are showing a big list of data, you should use some virtualisation on the client like react-virtualised.
I'm making a React app that needs a pretty big (about 1 or 2 MB) json file and I'm trying to figure out how to include the data in a way that will minimize loading time for the user. I'm pretty new at webpack but so far I see two options:
Add the data to the React source and import it into the jsx
Put the json in the static file directory and fetch it within the jsx
One other constraint is that multiple pages will be loading the same data, so I was thinking that maybe fetching would be better since the user would have the json cached after the first load.
I'm still pretty new to this and I might be missing something big so I appreciate any info you could give.
Importing a JSON file at build time to bundle it with your code is certainly possible. However I would say keep the JSON as a separate file and fetch it with AJAX. A few reasons why:
With caching, if you bundle it with your JS file, any time you make an incremental change to your code you need to re-bundle your code and JSON, causing your users to unnecessarily re-download a 1-2 MB file just to get the code updates even if the JSON part hasn't changed. If the files are separate, the browser can cache each independently and only re-download when there's a change.
What if users don't need the JSON? Is it 100% necessary in every use-case? Keeping the JSON separate means you can load it only at the actual time it's needed for use instead of preemptively.
You mentioned needing the JSON on multiple pages - if it is cached, theoretically they will download it only once even if it's needed across multiple pages.
You may want to read up on how to leverage caching so that your server provides the proper headers for browsers to effectively utilize caching.
I am using angular file upload for my project. referring the below link I have worked my project
http://nervgh.github.io/pages/angular-file-upload/examples/simple/
My requirement is once I select a file or multiple file if I refresh also it should not remove from the queue.
I tried to use localstorage but its not working
Here is the code where I have used local storage.
uploader.onAfterAddingAll = function(addedFileItems)
{
console.info('onAfterAddingAll', addedFileItems);
$localStorage.allfiles= addedFileItems;
};
At the end I did get console but it is showing empty.
console.log($localStorage.allfiles);
Please any one can help on this will be a great help
Ok so before starting please go through MDN Web Storage API. It states that
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
So localStorage can store key value pairs and as of now only string values are supported. It can not store files. So you wont be able to achieve what you are trying as you want to store file and that's not supported.
Also if you want to store objects you will have to stringify them and then store.
One suggested solution i have is you can convert your files to a bytes array and then store them and then you can handle those bytes the way you want.
Also this might help you I think thats waht you want . Mozilla Hacks Storing Images in localStorage
Once the image is saved as data url which is base 64 encode. You just need to send the string to the server and decode it with base 64
There is an application on React/Redux, which has the functionality to load images through FileReader. After the image is loaded, I get it as dataUrl. So, where is it better to save this data to use it in several React components? To store a relatively large amount of data in the Redux Store seems like a bad idea. At the same time, if the image data is saved somewhere else, the idea "one source of true" breaks. Does anyone have any suggestions?
I'd suggest creating an Object URL instead of a dataUrl, then saving that in the store, as it won't be a huge string anymore. Don't forget to revoke them when you don't need them anymore if possible.