I have a React web-app, which loads a JSON file from the server. The content is then sent as props down to several components.
Some of the "nodes" in the JSON file contain further references (URLs), that needs to be loaded. Kind of like a HTML page.
I'd like to do this asynchronously, so that (just like a browser) I render what I can, and when the further references have been loaded I render those parts.
How would you do this?
What I can think this far is to have every component be robust for missing data (if a URL is found instead of the data, show "loading" indicator), and then just trigger setState when more data come in. Any better ideas? RxJS or some super library?
BTW: I'm not using Redux -- just props/state ATM.
Related
I am used to creating webapplications with Wicket. There it is possible to generate a HTML page using POST, receiving a large JSON from the client (browser) to generate some charts. This can be done for example with CURL.
In Angular, I could not find a similar approach.
What is the recommended way to render a chart based on the JSON that a browser provides? An URL parameter is not really the way to go as the URL length is limited.
I can think of a work-around wheren I first post the data to some webservice, receive an id, and then pass that id to an URL in Angular, but that seems a lot of work for something simple :)
I have a url similar to https://www.nonexistentsite.com/fubar.json where fubar.json is a public json file which will download to your file system if you navigate to the url with your browser. I have a React web app where I want to read that file directly so as to display some of its data. I don't want to bother with any kind of a backend that would download the file to the apps file system so that it can read it. I want the React front end to read it directly in it's client side code with a fetch or an axios call or something like that. I'm familiar with the typical situation where I have a REST url like https://www.nonexistentsite.com/fubar which I can call and get the data. I'm failing to find info on how to handle this situation.
You could use Axios to load the data from the json file.
Example usage;
axios.get('https://www.nonexistentsite.com/fubar.json')
.then(jsoncontent => {
console.log(jsoncontent);
//do stuff with jsoncontent here
});
Maybe I'm misunderstanding your question, but I believe if you are just needing to fetch the json from a hosted file, you should be able to do so with axios.get(url)
I'm doing a web app based on original MEAN.js framework. When I want to request local json test file using $http.get() method in my AngularJS file, it returned my index html content.Is it a routing problem? I didnot change the original mean.js routing code(https://github.com/meanjs/mean), just added a $http.get() method in home.client.controller.js file. Can anyone help me with this? Thanks!
That is most likely happening, because you didn't define an endpoint for that particular GET request in your app.
Everytime you make a request to your server (for example a GET request to /my-request) nodejs/express are configured in MEAN.js so that your server will try to find the endpoint for that request, if it does not find any, that request will be handled by this particular code block (specified in /modules/core/server/routes/core.server.routes.js):
// Define application route
app.route('/*').get(core.renderIndex);
Which will basically render the index view.
I'm not sure if you're using a custom module or not, eitherway, if you want that request to be handled in a different way in MEAN.js, you can specify your endpoint in your custom module routes file (or in core.server.controller.js) like so:
// Define application route
app.route('/my-request').get(core.sendMyJSON);
Be careful, because this route must be placed before the one I mentioned earlier, otherwise your request will still be handled the same way and the index view will be rendered and served again.
Then you will have to create the controller that should be called to handle that request:
exports.sendMyJSON = function (req, res) {
// logic to serve the JSON file
};
This way you should be able to get it done with a few adjustments.
Side note:
I'm not entirely sure but I think if you place your JSON file in the public directory of your app you should be able to directly access it without the need for the extra logic.
I'm trying to set up a basic component that is rendered on the server and the client. The component is populated with data from a JSON API. I've got this working on the client-side by loading my data in componentDidMount and calling this.setState when it has loaded.
The problem I have is that the data isn't loaded on the server. How do I get the initial data into the server-rendered version of my component?
https://github.com/rackt/react-router/blob/latest/docs/guides/advanced/ServerRendering.md is very vague about this:
For data loading, you can use the renderProps argument to build
whatever convention you want--like adding static load methods to your
route components, or putting data loading functions on the
routes--it's up to you.
Do you have an example anywhere of how to do this? It seems like a very basic thing for a universal application to want to do!
Yup - we have https://github.com/rackt/async-props that provides a library for dealing with async data between server and client, and provides an example for doing so. If you're using a Flux framework, you'll want to make appropriate adjustments, but the basic approach will be quite similar.
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.