0

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.

pawelglow
  • 708
  • 1
  • 10
  • 20
  • Are you sure you are importing same JSON which you are showing at first. Its a bit strange that the data your showed in the output is totally different which console. – Durgesh Pal Jul 04 '20 at 10:20
  • @DurgeshPal Well, I had a comment in my post to mention the output is just an example... but anyway, I went ahead and updated the question to make sure it was not confusing. – pawelglow Jul 04 '20 at 11:55
  • Could this help? https://stackoverflow.com/questions/31194677/how-to-log-unicode-characters-to-the-console-in-javascript – JosefZ Jul 04 '20 at 14:40
  • 1
    Make sure that there should be `` in index.html `head` tag – Durgesh Pal Jul 04 '20 at 17:03
  • @DurgeshPal I have `` in the head tag and it did not change anything. – pawelglow Jul 05 '20 at 09:47
  • @JosefZ sadly, none of the suggestions worked for me from the question you linked to. I tried setting the meta charset tag in the head, I tried to set the charset in the script tag, and using the Unicode library also did not work. – pawelglow Jul 05 '20 at 09:53
  • Not sure it would help, but a few observations: "abramów"is the result of reading UTF-8 encoded "abramów" as Windows-1252 (you can test `new TextDecoder('Windows-1252').decode( new TextEncoder().encode( "abramów" ))`). Windows-1252 is the default for text files in most browsers, you could try to help them choose UTF-8 by appending a BOM header (see [this answer](https://stackoverflow.com/questions/6672834/specifying-blob-encoding-in-google-chrome/61670918#61670918) for an example). But I'm not sure if the import is really done by the browser or by webpack, might help anyways. – Kaiido Jul 06 '20 at 08:37

1 Answers1

0

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.

pawelglow
  • 708
  • 1
  • 10
  • 20