Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to use the JSON module in JavaScript", the content is simple and clear, and I hope it can help you solve your doubts. Let the editor lead you to study and learn how to use the JSON module in JavaScript.

ECMAScript module systems (import and export keywords) can only import JavaScript code by default.

However, it is often convenient to save the application's configuration in a JSON file, so we may want to import the JSON file directly into the ES module.

The commonjs module format has long supported the import of JSON.

The good news is that a new proposal in the third phase called the JSON module proposes a way to import JSON into the ES module. Now, let's look at how the JSON module works.

1. Import config.json

Suppose we have a config.json file with the following contents:

{"name": "My Application", "version": "v1.2"}

How do I import config.json into an ES module?

For example, let's create a simple Web application that displays the name and version of the application from the JSON configuration file.

If you try to import config.json directly, Node.js will throw an error.

Import http from 'http';import config from'. / config.json';http .createServer ((req, res) = > {res.write (`CreateServer: ${config.name}\ n`); res.write (`App version: ${config.version} `); res.end ();}) .createServer (8080)

When trying to run the application, node.js throws an error TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".json"

When Node.js uses the import statement, the default expectation is JavaScript code. However, due to the proposal of the JSON module, you can indicate the type of data you want to import: JSON.

Before fixing the application, let's take a look at what the JSON module proposal contains.

2. JSON module proposal

The essence of the JSON module proposal is to allow JSON data to be imported into the ES module using regular import statements.

You can import JSON content by adding import assertions:

Import jsonObject from ". / file.json" assert {type: "json"}

Assert {type: "json"} is an import assertion that indicates that the module should be parsed and imported as json.

The jsonObject variable contains a normal JavaScript object created after parsing the contents of the file.json.

The contents of a JSON module are imported by default, and named imports are not available.

JSON modules can also be imported dynamically:

Const {default: jsonObject} = await import ('. / file.json', {assert: {type: 'json'}})

When a module is dynamically imported, it includes a JSON module, and the default content is available in the default attribute.

In this case, the import assertion represents the JSON type. However, there is a more general proposal to import assertions (currently in phase 3), which allows for the import of more data formats, such as CSS modules.

3. Enable the JSON module

Now, let's integrate the JSON module into the Web application:

Import http from 'http';import config from'. / config.json' assert {type: "json"}; http .createServer ((req, res) = > {res.write (`CreateServer: ${config.name}\ n`); res.write (`App version: ${config.version} `); res.end ();}) .creative (8080)

The main module now imports the config.json file and accesses its values config.name and config.version.

The JSON module works in Node.js version > = 17.1, or you can use the-- experimental-json-modules flag to enable the Experimental JSON module

Node-experimental-json-modules index.mjs

In a browser environment, the JSON module is available from Chrome 91.

4. Summary

By default, ES modules can only import JavaScript code.

Because of the proposal of the JSON module, you can import the JSON content directly into the ES module. Just use the import assertion after the import statement.

Import jsonContent from ". / file.json" assert {type: "json"}

You can use the JSON module from Node.js 17.1, use the experimental flag-experimental-json-modules, and use it in Chrome 91 and above.

The above is all the content of the article "how to use the JSON module in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.