In my vue.js App I have been loading all the data from an API that I have configured as baseURL in my nuxt.config.js.
Now I want to load a static json file, that does not come from that API. That file will include additional names of files to load depending on user interaction.
In order to keep my code consistent I would like to use axios.get to load the static data in the same way I do with API calls.
So far I haven't managed to do so.
I placed the json files inside my static directory an have tried to access the files like this:
const { data } = await axios.get(
'_nuxt/static/json/staticData.json',
{ baseURL: window.location.origin }
)
I can access other static files like images form the static directory, but the json file generates a 404 error.
Should I choose another directory or try a totally different approach?
I included the path segment "_nuxt/static/" because the URL of the rendered image file i checked for reference had it in there too. Turns out this is not the right URL for my Axios call. Code should be written like this:
const { data } = await axios.get(
'/json/staticData.json',
{ baseURL: window.location.origin }
)
Related
I am creating a document for my users that is prefilled/customized with each user's information, and I would like to save a copy of the document to my database/filesystem.
To show the document to the user, in the frontend I have a React page with a few blanks. I pull info from the backend to fill in those blanks, and I allow the user to print the finished document out. I would like to save a pdf for myself in the backend too, though, and I'm not sure how to do it.
Is it possible to render and populate React in my backend and convert that into a pdf, all in the backend?
I've tried Googling different solutions, but I haven't found anything helpful.
use headless browser, such as puppeteer:
const puppeteer = require('puppeteer')
async function printPDF(url) {
const browser = await puppeteer.launch({ headless: true })
const page = await browser.newPage()
await page.goto(url)
const pdf = await page.pdf({ format: 'A4' })
await browser.close()
return pdf
}
depending on what programming languague is your BE using, you can likely follow these steps with the proper library:
On the BE you should have access to your customer information already as you're sending it to FE.
With this information use a template system to render the variables to the HTML code, you may need to edit your react code a little to match the template scheme.
Then with the render template use a library to generate a PDF file and save it to the proper place (depending on your architecture, eg: on a folder on the same system, an s3 bucket, etc).
Finally after saving the pdf and getting the URL, save the string URL to your user table if any.
For example, in python you can use the following libs:
jinja (template renderer)
pdfkit (html pdf renderer)
I am trying to get data of "value" from a data file
{"success":"true","value":"500","items":"12","currency":"NOK"}
this is what i think should work.
<div class="value"></div>
<script>
$.get('URLTOFILE', function(data) {
var text = `Value: ${data.value|| "Not Found"}`
$(".value").html(text);
});
</script>
Is your json file hosted on a server somewhere? If so, are you getting any errors when you attempt to fetch it?
If the json file is simply a file on your computer, you won't be able to load it like that. If you are using webpack or another package manager to bundle your files, you can use import to import the file into your javascript file like so:
import json from "file.json";
console.log("My json: ", json);
// Rest of javascript file here
This assumes that you've set up your bundler to handle json files though. Webpack does this for you automatically. So if you're using it, then this should work. Not sure about other bundlers though.
But it's best to host the file on a server and fetch it, especially if the data changes constantly - such as from an API.
Suppose we have a JSON file with static data for our Angular 5 app. We want to "embed" it in app scripts, so when we'd like to get data from it, the app will not make a round trip to server for it.
Can you explain how to achieve it from configuring the Angular CLI (if needed) up to the TypeScript code returning data from that JSON file?
You can simply use the json file as though it is a url endpoint in your service.
If you have say a file called foo.json in assets/foo.json you simply embed that path to your http call.
//this is in src/ directory which is one layer deep from assets
#Injectable()
export class MyService {
constructor(private http: HttpClient) { }
getData() {
return this.http.get('../assets/foo.json');
}
}
I am building a fake back end server for my Angular2 application and I want to use for this purpose "angular2-in-memory-web-api". I have created the service for my http request and also a typescript file with createDb() method
I am following heroes demo of angular documentation and I do not understand what is the meaning of :
private heroesUrl = 'api/heroes'; // URL to web api . I do not find this file and I know it should be a json file
constructor(private http: Http) { }
getHeroes(): Promise<Hero[]> {
return this.http.get(this.heroesUrl)
.toPromise()
.then(response => response.json().data as Hero[])
.catch(this.handleError);
}
In my application I have created the InMemoryDbService and all datas are inside createDb() method but also I have a json file in my api folder like api/products.
Now when I run the application I got the error "Collection not found". If I comment out the code about InMemoryWebApi I am able to retrieve all the products. I could have gone with the example of json file but I need to do also put, post, get(id:number) requests and I am not able to do it with the usage of json file.
I am wondering now win the Angular2 demos which can be found on https://angular.io/docs/ts/latest/tutorial/toh-pt6.html# I do not see any file on api/heroes.
Does it mean that this path does not exist, or if it exists is it an empty json file? I have tried to delete the json file, also just do it an empty file but still it is not working.
Note: The code is programmatically ok
I am trying to get a static .json file from my angular $http request, but it appears ServiceStack has a handle on all *.json requests. Is it possible to GET a physical json file?
Here is the error I get:
Forbidden
Request.HttpMethod: GET
Request.PathInfo: /app/resources/menu/administrator.json
Request.QueryString:
Request.RawUrl: /app/resources/menu/administrator.json
By default ServiceStack only serves static files with pre-configured safe file extensions.
You can add static.json files to the allowed white-list with:
SetConfig(new HostConfig {
AllowFileExtensions = { "json" },
});