How to parse external JSON file in the .jsx file - json

I'm new with React and need some one with my json file Parsing problem. I am having a PerfCompare.jsx with a variable needed in the following compare. And i need this var parsing from a external JSON file(trscConfig.JSON). I am using this lines to do. but always get this SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
trscConfig.JSON
{
"server" : "http://myserver.com"
}
PerfCompare.jsx
import React, { Component } from 'react';
import { Form, Input, Button, Radio, Row, Table, Divider, Progress, Alert } from 'antd';
import math from 'mathjs';
import { stringify } from 'qs';
import PerffarmRunJSON from './lib/PerffarmRunJSON';
import JenkinsRunJSON from './lib/JenkinsRunJSON';
import benchmarkVariantsInfo from './lib/benchmarkVariantsInfo';
import './PerfCompare.css';
//import App_DATA from './trscConfig.JSON';
const server_2 = JSON.parse('./trscConfig.JSON').server;

Use fetch():
const response = await fetch('trscConfig.JSON');
const json = await response.json();
const server_2 = json.server;
Or, if your build tool doesn't support await yet:
fetch('trscConfig.JSON')
.then(response => response.json())
.then(json => {
const server_2 = json.server;
});
In either case, downloading the JSON file at runtime will mean the response will not be available immediately. If this is a React component, I suggest doing this in componentDidMount().
Alternatively, if the JSON file is a static asset:
import {server as server_2} from './trscConfig.JSON';

JSON.parse doesn't know how to make HTTP requests/read files - it just parses exactly what you've passed in. In this case, it's failing because it's trying to convert the literal string ./trscConfig.JSON into a JSON object!
There's two ways you could get this working:
Load in the JSON via your module bundler, as you're doing in the commented out line in your code. I believe Webpack (and most others) support this out of the box, but your configuration might have it disabled, intentionally or otherwise. It might also be because you're using uppercase file extensions - try it with a file that has .json in lowercase.
Use XMLHttpRequest, the Fetch API, or a third-party HTTP client library to download the JSON at runtime, and then parse the downloaded text.

Related

How to use 'require' to import a JSON in NestJS controller?

I'm trying to return a json file as a controller response, but I can't get the content of the json.
import { Controller, Get, Res, HttpStatus, Query } from '#nestjs/common';
import { Response } from 'express';
import * as MOCKED_RESPONSE_TS from './data/payment-method.data'; // this ts file is imported fine
const MOCKED_RESPONSE = require('./data/payment-method-mock'); // this json file is not found
#Controller('commons')
export class CommonController {
#Get('/payment-method')
getPaymentMoethod(#Res() res: Response): any {
res.status(HttpStatus.OK).send(MOCKED_RESPONSE);
}
}
Actually the log returns: Error: Cannot find module './data/payment-method' and the app doesn't compile
I have done this with express (even with typescript) and works fine.
I don't know if i have to setup my project to read jsons (I'm newby on nest). By the moment I have created a typescript file exporting a const with the json content and I called it successfuly
I guess the problem lies in the way you import your .json file (change import instead of const)
Another advice or solution would be to leverage the .json() method of the res object (which is actually the express adapter response object).
Let's try with this code:
Your common.controller.ts file:
import { Controller, Get, Res, HttpStatus, Query } from '#nestjs/common';
import { Response } from 'express';
import * as MOCKED_RESPONSE_TS from './data/payment-method.data'; // this ts file should still be imported fine
import * as MOCKED_RESPONSE from './data/payment-method-mock.json'; // or use const inside the controller function
#Controller('commons')
export class CommonController {
#Get('/payment-method')
getPaymentMoethod(#Res() res: Response): any {
res.status(HttpStatus.OK).json(MOCKED_RESPONSE); // <= this sends response data as json
}
}
Also in your tsconfig.json file, don't forget to add this line:
tsconfig.json
{
"compilerOptions": {
// ... other options
"resolveJsonModule": true, // here is the important line, this will help VSCode to autocomplete and suggest quick-fixes
// ... other options
}
Last thoughts: you could use the sendfile() method of the res object depending on whether you want to send back a json file or the content of your json file.
Let me know if it helps ;)
first make sure you are calling it correctly.
Are you getting any response at all? if not double check your method name since its spelled like this: getPaymentMoethod and it should be this: getPaymentMethod.
Secondly I would recommend requiring outside the method and setting it to a constant.
Lastly try wrapping it in JSON.stringify() to convert the response to a json stringified object

How to add path to export my data to file .csv

I am using lib in npm for project angular call json2csv for export JSON to file.csv (excel)
Here is my code:
const fields = ['id', 'name'];
const opts = { fields };
try {
const parser = new json2csv.Parser(opts);
const csv = parser.parse(this.data);
console.log(csv);
} catch (err) {
console.error(err);
}
Printing object is correct data but not create file.
Can anyone help me when add filename and path in my code?
The json2csv node_module that you're trying to use in your Angular App is not supposed to be used there. It's supposed to be used on your NodeJS backend.
Your Frontend/Client is not responsible for writing files to the system. Your Backend/Server is.
Ideally, you should be creating a REST API to which, you'll be passing the JSON to be written in a CSV file as a Request Payload.
Your NodeJS Backend can then respond to that request with the downloadable CSV file that is generated by using the json2csv node_module

Reading from a non-static JSON file in an Angular4 app

I have a basic Angular web app which reads from a JSON file located on the same server as the app and parses through the JSON file in order to set certain values on objects which drive certain behavior in my app (applies css classes, etc.)
I am not able to find online and/or figure out myself how to set up the controller to read from the JSON file in a way that allows the file to be changed and Angular to dynamically reload the file once it has been changed without reloading the entire page. The JSON file is local on the server where the app is deployed, and I wanted to avoid standing up a web service just to serve a file that already exists on the same server the app is deployed.
Here is what I am doing now:
ngOnInit(): void {
// Make the HTTP request:
this.http.get('../assets/applicationLogs.json').subscribe(data => {
// Read the result field from the JSON response.
this.node_a_status= data.nodes[0].status;
this.node_b_status= data.nodes[1].status;
this.node_c_status= data.nodes[2].status;
});
}
And here is a what my JSON file looks like:
{
"nodes":[
{ "node":"Node A", "status":"processing", "errors":null },
{ "node":"Node B", "status":"processing", "errors":null },
{ "node":"Node C", "status":"inactive", "errors":null }
]
}
First, I know I will probably need to move this get logic out of ngOnInit(), but I am a little lost on how I should go about achieving the desired behavior I have described with typescript.
You're using an http request method on the file so "Poll it"... same way you would any other http JSON service. Here's a ready made poller for you to import: https://www.npmjs.com/package/rx-polling
Best thing you can do is create a service out of it and call it in ngOnInit method and use the response the same way you've shown.
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/dom/ajax';
import 'rxjs/add/operator/map';
import polling from 'rx-polling';
// Example of an Observable which requests some JSON data
const request$ = Observable.ajax({
url: '../assets/applicationLogs.json',
crossDomain: true
}).map(response => response.response || [])
.map(response => response.slice(0, 10)); // Take only first 10 comments
polling(request$, { interval: 5000 }).subscribe((comments) => {
console.log(comments);
}, (error) => {
// The Observable will throw if it's not able to recover after N attempts
// By default it will attempts 9 times with exponential delay between each other.
console.error(error);
});

Get json file for karma unit test

I want to get a JSON file in my unit test because I need to have it for my tests but I dont know how I can include the file
I run my test with karma and Jasmine. And my project is created with Angular 2.
The name of my JSON file is 'www/assets/mocks/emptyCalendarData.JSON'.
Does someone know how I can include a JSON file into a spec file?
Thanks
UPDATE
I tried to use HTTP get but then I got a system
let calendarData: Calendar;
http.get('www/assets/mocks/emptyCalendarData.json')
.map(res => res.json())
.subscribe(
data => calendarData = data,
err => console.log(JSON.stringify(err))
);
Then I get this error:
ERROR: Error{stack: null, originalErr: TypeError{stack: 'mergeOptions
get
eval code
eval#[native code]
__exec#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:1482:16
execute#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3896:22
linkDynamicModule#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3222:36
link#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3065:28
execute#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:3402:17
doDynamicExecute#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:796:32
link#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:998:36
doLink#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:650:11
updateLinkSetOnLoad#http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:698:24
http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624:510:30
invoke#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:364:34
run#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:257:50
http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:609:61
invokeTask#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:397:43
runTask#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:294:58
drainMicroTaskQueue#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:515:43
invoke#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:467:41
http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:92:33
invokeTask#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:397:43
runTask#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:294:58
invoke#http://localhost:9876/base/node_modules/zone.js/dist/zone.js?b9a84410301a475a439d6b7b4e7eff0954f5b925:464:41', line: 38}, line: 821, sourceURL: 'http://localhost:9876/base/node_modules/systemjs/dist/system.src.js?18a094f61af9f2ec0577ca3a337760d97719b624'}
There are many ways to do that:
import json if it is inside of your app: import * as json from './test'; //will import test.json
download file using Http and do map(res=>res.json())
for webpack use json-loader plugin: var json = require('./my.json')
for gulp/grunt etc. you could write code generator
I stash my Mock JSON data into a ts file like a variable. i.e
export var getMockResponseJSON = { 'key': value };
Later when I want to reach this variable, I simply import it like:
import {getMockResponseJSON} from "../JSONs";
and use it in my class
expect(getMockResponseJSON.key).not.toEqual(1);
You could leverage the Http class of Angular2 within your tests to do that.
Here is a sample within a beforeAll function:
beforeAll((done) => {
let injector = Injector.resolveAndCreate([ HTTP_PROVIDERS ]);
let http = injector.get(Http);
http.get('app/data.json').subscribe(
(data) => {
this.data = data.json();
done();
}
);
});
See this plunkr: https://plnkr.co/edit/k6jxHf?p=preview.

How to import a JSON file in ECMAScript 6?

How can I access a JSON file in ECMAScript 6?
The following doesn't work:
import config from '../config.json'
This works fine if I try to import a JavaScript file.
https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules-node-js/
ES modules are still reasonably new in Node.js land (they're stable since Node 14). Modules come with a built-in module system, and features such as top-level await.
I read an informative post on ES modules by Pawel Grzybek and learned that you can't import JSON files in ES modules today.
import info from `./package.json` assert { type: `json` };
const { default: info } = await import("./package.json", {
assert: {
type: "json",
},
});
That's a real bummer because I'm pretty used to doing require calls such as const data = require('./some-file.json') in Node.js.
But can you use import assertions in Node.js today?
At the time of writing, the current Node.js LTS (v18.12) still marks import assertions as experimental.
This post explains ways to deal with JSON in ES modules if you don't want to use the experimental feature yet.
Option 1: Read and parse JSON files yourself
The Node.js documentation advises to use the fs module and do the work of reading the files and parsing it yourself.
import { readFile } from 'fs/promises';
const json = JSON.parse(
await readFile(
new URL('./some-file.json', import.meta.url)
)
);
Option 2: Leverage the CommonJS require function to load JSON files
The documentation also states that you can use createRequire to load JSON files. This approach is the way Pawel advises in his blog post.
createRequire allows you to construct a CommonJS require function to use typical CommonJS features such as reading JSON in your Node.js EcmaScript modules.
import { createRequire } from "module";
const require = createRequire(import.meta.url);
const data = require("./data.json");
In TypeScript or using Babel, you can import json file in your code.
// Babel
import * as data from './example.json';
const word = data.name;
console.log(word); // output 'testing'
Reference:
https://hackernoon.com/import-json-into-typescript-8d465beded79
Importing JSON using ES modules was submitted as feature to TC39 in mid 2020, and is (at the time of this edit) in stage 3, which is the last stage before being accepted in to the spec (see https://github.com/tc39/proposal-json-modules for more details). Once landed, you will be able to use it as:
import someName from "./some/path/to/your/file.json";
Where someName is effectively the name of the variable for the JS object described by the JSON data. (And of course, note that this imports JavaScript from a JSON source, it does not "import JSON").
If you're using a modern enough bundler (like esbuild or the like) or you're using a recent enough transpiler (like babel) then you can already use this syntax without having to worry about support.
Alternatively, if you have the luxury of ownership of JSON files you can also turn your JSON into valid JS files with a minimum of extra code:
config.js
export default
{
// my json here...
}
then...
import config from '../config.js'
does not allow import of existing .json files, but does a job.
Unfortunately, ES6/ES2015 doesn't support loading JSON via the module import syntax. But...
There are many ways you can do it. Depending on your needs, you can either look into how to read files in JavaScript (window.FileReader could be an option if you're running in the browser) or use some other loaders as described in other questions (assuming you are using NodeJS).
IMO simplest way is probably to just put the JSON as a JS object into an ES6 module and export it. That way, you can just import it where you need it.
Also, worth noting if you're using Webpack, importing of JSON files will work by default (since webpack >= v2.0.0).
import config from '../config.json';
If you're using node you can:
const fs = require('fs');
const { config } = JSON.parse(fs.readFileSync('../config.json'));
OR
const evaluation = require('../config.json');
// evaluation will then contain all props, so evaluation.config
// or you could use:
const { config } = require('../config.json');
Else:
// config.js
{
// json object here
}
// script.js
import { config } from '../config.js';
OR
import * from '../config.json'
I'm using babel+browserify and I have a JSON file in a directory ./i18n/locale-en.json with translations namespace (to be used with ngTranslate).
Without having to export anything from the JSON file (which btw is not possible), I could make a default import of its content with this syntax:
import translationsJSON from './i18n/locale-en';
Depending on your build tooling and the data structure within the JSON file, it may require importing the default.
import { default as config } from '../config.json';
e.g. usage within Next.js
In a browser with fetch (basically all of them now):
At the moment, we can't import files with a JSON mime type, only files with a JavaScript mime type. It might be a feature added in the future (official discussion).
fetch('./file.json')
.then(response => response.json())
.then(obj => console.log(obj))
In Node.js v13.2+:
It currently requires the --experimental-json-modules flag, otherwise it isn't supported by default.
Try running
node --input-type module --experimental-json-modules --eval "import obj from './file.json'; console.log(obj)"
and see the obj content outputted to console.
Thanks to all the people who proposed and implemented JSON modules and Import Assertions. Since Chrome 91, you can import JSON directly, for example:
// test.json
{
"hello": "world"
}
// Static Import
import json from "./test.json" assert { type: "json" };
console.log(json.hello);
// Dynamic Import
const { default: json } = await import("./test.json", { assert: { type: "json" } });
console.log(json.hello);
// Dynamic Import
import("./test.json", { assert: { type: "json" } })
.then(module => console.log(module.default.hello));
Note: other browsers may not yet implement this feature at the moment.
A bit late, but I just stumbled across the same problem while trying to provide analytics for my web app that involved sending app version based on the package.json version.
Configuration is as follows: React + Redux, Webpack 3.5.6
The json-loader isn't doing much since Webpack 2+, so after some fiddling with it, I ended up removing it.
The solution that actually worked for me, was simply using fetch.
While this will most probably enforce some code changes to adapt to the async approach, it worked perfectly, especially given the fact that fetch will offer json decoding on the fly.
So here it is:
fetch('../../package.json')
.then(resp => resp.json())
.then((packageJson) => {
console.log(packageJson.version);
});
Do keep in mind, that since we're talking about package.json specifically here, the file will not usually come bundled in your production build (or even dev for that matter), so you will have to use the CopyWebpackPlugin to have access to it when using fetch.
Simply do this:
import * as importedConfig from '../config.json';
Then use it like the following:
const config = importedConfig.default;
Adding to the other answers, in Node.js it is possible to use require to read JSON files even inside ES modules. I found this to be especially useful when reading files inside other packages, because it takes advantage of Node's own module resolution strategy to locate the file.
require in an ES module must be first created with createRequire.
Here is a complete example:
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const packageJson = require('typescript/package.json');
console.log(`You have TypeScript version ${packageJson.version} installed.`);
In a project with TypeScript installed, the code above will read and print the TypeScript version number from package.json.
For NodeJS v12 and above, --experimental-json-modules would do the trick, without any help from babel.
https://nodejs.org/docs/latest-v14.x/api/esm.html#esm_experimental_json_modules
But it is imported in commonjs form, so import { a, b } from 'c.json' is not yet supported.
But you can do:
import c from 'c.json';
const { a, b } = c;
import data from "./resource.json”
is possible in Chrome 91.
JSON modules are now supported. This allows developers to statically import JSON instead of relying on the fetch() function which dynamically retrieves it.
https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules/
A more elegant solution is to use the CommonJS require function
createRequire construct a CommonJS require function so that you can use typical CommonJS features such as reading JSON
import { createRequire } from "module";
const require = createRequire(import.meta.url);
const data = require("./data.json");
importing JSON files are still experimental. It can be supported via the below flag.
--experimental-json-modules
otherwise you can load your JSON file relative to import.meta.url with fs directly:-
import { readFile } from 'fs/promises';
const config = JSON.parse(await readFile(new URL('../config.json', import.meta.url)));
you can also use module.createRequire()
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const config = require('../config.json');
I used it installing the plugin "babel-plugin-inline-json-import" and then in .balberc add the plugin.
Install plugin
npm install --save-dev babel-plugin-inline-json-import
Config plugin in babelrc
"plugin": [
"inline-json-import"
]
And this is the code where I use it
import es from './es.json'
import en from './en.json'
export const dictionary = { es, en }
I'm using
vuejs, version: 2.6.12
vuex, version: 3.6.0
vuex-i18n, version: 1.13.1.
My solution is:
messages.js:
import Vue from 'vue'
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import translationsPl from './messages_pl'
import translationsEn from './messages_en'
Vue.use(Vuex);
export const messages = new Vuex.Store();
Vue.use(vuexI18n.plugin, messages);
Vue.i18n.add('en', translationsEn);
Vue.i18n.add('pl', translationsPl);
Vue.i18n.set('pl');
messages_pl.json:
{
"loadingSpinner.text:"Ładowanie..."
}
messages_en.json:
{
"loadingSpinner.default.text":"Loading..."
}
majn.js
import {messages} from './i18n/messages'
Vue.use(messages);
let filePath = '../../data/my-file.json'
let arrayImport = await import(filePath, {
assert: { type: "json" },
});
const inputArray = arrayImport.default
console.log('result', inputArray)
More information here: v8 - Dynamic import().
As said by Azad, the correct answer is to load the file with fs.readFileSync() (or any of the asynchronous variants such as fs.readFile with callback or fs.promises.readFile with promises/await, then parse the JSON with JSON.parse()
const packageJsonRaw = fs.readFileSync('location/to/package.json' )
const packageJson = JSON.parse(packageJsonRaw )
Webpack/Babel options are not practical unless you are already using that set up.
Make sure the type attribute is set to module because we are using the ES6 Modules syntax.
And here is how we would import a JSON file in our index.js file.
import myJson from './example.json' assert {type: 'json'};
import a JSON file in ECMAScript 6
import myJson from './example.json' assert {type: 'json'};
https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules-node-js/
ES modules are still reasonably new in Node.js land (they're stable since Node 14). Modules come with a built-in module system, and features such as top-level await.
I read an informative post on ES modules by Pawel Grzybek and learned that you can't import JSON files in ES modules today.
import info from `./package.json` assert { type: `json` };
const { default: info } = await import("./package.json", {
assert: {
type: "json",
},
});
That's a real bummer because I'm pretty used to doing require calls such as const data = require('./some-file.json') in Node.js.
But can you use import assertions in Node.js today?
At the time of writing, the current Node.js LTS (v18.12) still marks import assertions as experimental.
This post explains ways to deal with JSON in ES modules if you don't want to use the experimental feature yet.
Option 1: Read and parse JSON files yourself
The Node.js documentation advises to use the fs module and do the work of reading the files and parsing it yourself.
import { readFile } from 'fs/promises';
const json = JSON.parse(
await readFile(
new URL('./some-file.json', import.meta.url)
)
);
Option 2: Leverage the CommonJS require function to load JSON files
The documentation also states that you can use createRequire to load JSON files. This approach is the way Pawel advises in his blog post.
createRequire allows you to construct a CommonJS require function to use typical CommonJS features such as reading JSON in your Node.js EcmaScript modules.
import { createRequire } from "module";
const require = createRequire(import.meta.url);
const data = require("./data.json");
The file structure with the json extension is used to transfer data, the json file data can be retrieved locally by sending a request using the fetch command.
In the following example, the data of the count.json file is received
// count.json
fetch("./count.json")
.then((response) => { return response.json(); })
.then((data) => console.log(data));