javascript - Why is default required in importing JSON file in JS code - Stack Overflow

admin管理员组

文章数量:1357148

I have a JSON data which I can get from this API. However when I copy the contents of this link into a local file and save it as JSON, and then import in in JS like:

import * as data from "./data.json" assert { type: "json" };

console.log(data)

I am getting a module in my console where the default parameter contains my JSON object.

But when I do:

import * as data from "./data.json" assert { type: "json" };

console.log(data.default)

Then only I can view my JSON object like normal, i.e. what would the output have been if I did:

async function populate() {

  const requestURL = '.json';
  const request = new Request(requestURL);

  const response = await fetch(request);
  const superHeroes = await response.json();
  console.log(superHeroes)
}

populate();

I have a JSON data which I can get from this API. However when I copy the contents of this link into a local file and save it as JSON, and then import in in JS like:

import * as data from "./data.json" assert { type: "json" };

console.log(data)

I am getting a module in my console where the default parameter contains my JSON object.

But when I do:

import * as data from "./data.json" assert { type: "json" };

console.log(data.default)

Then only I can view my JSON object like normal, i.e. what would the output have been if I did:

async function populate() {

  const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
  const request = new Request(requestURL);

  const response = await fetch(request);
  const superHeroes = await response.json();
  console.log(superHeroes)
}

populate();

Why does this happen? And is there any better method of importing my JSON file so that I can access it in my code?

• javascript
• json
• asynchronous

Share Improve this question Follow asked Feb 6, 2022 at 16:42 ritwick_ _Dritwick_ _D 12744 silver badges1212 bronze badges 1

• Because if I do so, and try to console.log the object I get the error: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.. A quick google search led me to use assert { type: "json" } – ritwick_ _D Commented Feb 6, 2022 at 17:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

This happens because the import * as line imports an_entire_modules_contents where cause the absence of an explicit export default the default property coincides with the content of your json file. If you want the data variable contains your json file you can use instead:

import {default as data} from "./data.json";
console.log(data); //<-- it will print the content of your json file

Or the simple shorthand below:

import data from "./data.json";

本文标签： javascriptWhy is default required in importing JSON file in JS codeStack Overflow