I am importing my json file from asset folder to read some configurations inside the app which works perfectly and I can change the json values based on my requirement
you can refer : https://www.techiediaries.com/import-local-json-files-in-typescript/
But in the production build version, When try to change the values from json file in the asset folder, it reads development data
after the investigation we found that json data are embedded in main-es5 file,
is there is any way to read json file using import method and we can change data dynamically (based on environment)
I would suggest the cleaner way to load it via HttpClient, and if it contains some configuration, I think this is the way you can change the data in assets and app will load again and again with HttpClient.
And if you want to read based on the environment, typescript import doesn't work.
Create a service, read the JSON via HttpClient based on pre-placed environment-specific JSON.
This is another alternative solution you can try.
Create one app.constant.ts file
//
// ===== File app.constants.ts
//
'use strict';
export const appConstants = {
'key':'value',
'key1':'value'
};
Import like this in component :
import {appConstants} from './../app.constants';
Use in component like this :
this.variable = appConstants.key;
Related
I have a url for a REST API, like 'https://someurl/test' that responds with a JSON and I need to import that data to my React application(s).
I wanted to call that endpoint from a react based SPA.
How can I do it?
import only works for local files (unless there's a babel/webpack plugin I'm unaware of).
If the file is static, you can download it and put it somewhere in your projects files and then import it.
If the file changes frequently then you should make a HTTP fetch (for example using axios) to request the file as it's needed. The exact specifics of how to do this will depend on your use-case (eg if this is for client or for SSR).
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data =>console.log(data));
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 worked with Angular +9 and i've a problem when read json file from assets folder.
i am using the http module and the call works fine when the application is run locally, but when i run ng-build and publish the application on a server, the call to the json file doesn't work indicating the following message:
ERROR Http failure response for assets/resources/fakeData.json: 0 Unknown Error
My code:
What could be the problem? Why can't I access the assets folder directly?
Your problem is that you are trying to access your file system with the HttpClient. You can't do that. You could of course make an API Endpoint that returns your json file, but you can't access it directly like that with the HttpClient module.
Here what I would do instead:
import * as myJson from '<path to fakeData.json>';
...
getData(): any {
return myJson;
}
If you are just trying to mess around with HttpClient module and need some json to play with, you use JSON Placeholder API:
this.http.get('https://jsonplaceholder.typicode.com/todos/1');
According to the below SOF Question, it looks like you can get your local json files to be hosted along with the angular dev server if you wanted to:
Load json from local file with http.get() in angular 2
I don't know which web server you are using, but it looks like your web server does not support hosting of JSON-files.
Apache: use the AddType directive - https://cets.seas.upenn.edu/answers/addtype.html
IIS: Add a MIME-type - https://learn.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap
i have tried using fs module but I couldn't use this module in my project
const fs = require('fs');
import * as fs from ('fs')
None of the above commands don't work
You can use file saver or the solution here. You can't use node.js modules on the SPA.
If you want to do that, you need to create an API and save on the server side.
You can in cases use node modules as described in this SO question, but the browser will not allow to access the file system as you intend to do with th fs module.
fs module is node module and You can't use it on the client-side.
I suggest you use this
Save JSON string
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.