问题
I have the below JSON file "locations.json":
{
"lubelskie": [
"abramów",
"adamów",
"aleksandrów",
"annopol",
"baranów",
"batorz",
"bełżec",
"bełżyce"
]
}
I import the JSON in to my Class, using the below statement:
import locations from "./locations.json";
class areas {
constructor() {
console.log(locations);
}
}
export default areas;
The console output I get is below:
{
lubelskie: ["abramów", "adamów", "aleksandrów", "annopol", "baranów", "batorz", "bełżec", "bełżyce"]
}
The problem is the characters get encoded from "abramów" to "abramów" or from "bełżyce" to "bełżyce".
I am unable to show them in their original encoding.
The JSON file is encoded in UTF-8 format.
I have the below package.json packages:
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.6.3",
"acorn": "^6.3.0",
"autoprefixer": "^9.6.5",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"imagemin": "^6.0.0",
"img-loader": "^3.0.0",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "^0.4.2",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"raw-loader": "^4.0.1",
"sass-loader": "^7.3.1",
"tar": "^4.4.13",
"url-loader": "^1.1.1",
"utf8": "^3.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"zip-webpack-plugin": "^3.0.0"
},
"resolutions": {
"webpack/acorn": "6.1.1",
"tar": ">=4.4.2"
}
I tried loading the files in different ways, using "raw-loader" and converting the UTF-8 characters to /uABC, but it looks like the encoding happens during the import statement. The babel transpiler keeps the encoding correct and the converted webpack files have the correct UTF-8 encoding, but when the script runs the encoding happens.
Any suggestions where I am doing something wrong?
UPDATE #1:
I tried to encode the JSON file to Unicode:
"abram\u00f3w",
"adam\u00f3w",
"aleksandr\u00f3w",
"annopol",
"baran\u00f3w",
"batorz",
"be\u0142\u017cec",
"be\u0142\u017cyce"
I tried to use the https://www.npmjs.com/package/unidecode library and the meta charset tags in the head/script tag, but nothing worked. I still get the same output in the console.
UPDATE #2:
I tried changing the JSON file to a JS file with the below contents:
export default JSON.stringify({
"lubelskie": [
"abramów",
"adamów",
"aleksandrów",
"annopol",
"baranów",
"batorz",
"bełżec",
"bełżyce"
]
})
Then importing the file like below:
import locations from "./locations.js";
class areas {
constructor() {
//const l = JSON.parse(locations);
console.log(locations);
}
}
export default areas;
I still get the same output in the console, the locations are encoded.
回答1:
I realized the issue was with the import statement and that for some reason the importing encodes my JSON data. I finally come up with a working solution - loading the JSON file using an AJAX call.
JSON file "data.json":
{
"lubelskie": [
"abramów",
"adamów",
"aleksandrów",
"annopol",
"baranów",
"batorz",
"bełżec",
"bełżyce"
]
}
AJAX request:
class areas {
constructor() {
Axios.get("data.json", function(response) {
console.log(response);
}, function(response) {
console.log("Error: ", response);
});
}
}
export default areas;
The JSON data in the console output is the same as in the JSON input file, exactly like I wanted. No encoding occured and inserting the data in to a HTML element also worked without including any chartset="utf-8"
meta tags.
I am still unsure why the importing encoded the JSON data, if someone can suggest a fix I would be greatful, but for now this solution works.
来源:https://stackoverflow.com/questions/62727831/wrong-encoding-when-importing-json-with-polish-characters-in-javascript