What is the process for eliminating the perplexing "default" attribute that has been inserted into JSON?

Question

What is the process for eliminating the perplexing "default" attribute that has been inserted into JSON?

I recently came across the jsondata.json file:

{
    "name": "John",
    "age": 30,
    "car": "ferrari"
}

Located in the same directory is a typescript file called main.ts where I simply output the json data using console.log

import * as j from './jsondata.json';

console.log(j);

The output includes an unexpected field named default. What is this field, why does it appear, and how can it be removed?

Just for your information, here is my setup in the tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./out",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true
  }
}

json typescript

Answer 1

Answer №1

After experimenting with different configurations, I discovered that the final two settings provide the desired outcome.

jsondata.json:

{
    "name": "John",
    "age": 30,
    "car": "ferrari2"
}

When resolveJsonModule is set to true without esModuleInterop and importing without *, it results in an error.

main.ts:

import j from './jsondata.json';
console.log(j);

tsconfig.ts:

"resolveJsonModule": true,
// "esModuleInterop": true

result:

>

{ name: 'John', age: 30, car: 'ferrari2' }

Module ... can only be default-imported using the 'esModuleInterop' flag

Setting both flags to true and using * import displays the default value

main.ts:

import * as j from './jsondata.json';
console.log(j);

tsconfig.ts

"resolveJsonModule": true,
"esModuleInterop": true

result:

>

{
  name: 'John',
  age: 30,
  car: 'ferrari2',
  default: { name: 'John', age: 30, car: 'ferrari2' }
}

When both flags are set to true without using *, the default value is not shown

main.ts:

import j from './jsondata.json';
console.log(j);

tsconfig.ts:

"resolveJsonModule": true,
"esModuleInterop": true

result:

>

{ name: 'John', age: 30, car: 'ferrari2' }

Using resolveJsonModule as true and no esModuleInterop with * import does not display a default value

main.ts:

import * as j from './jsondata.json';
console.log(j);

tsconfig.ts:

"resolveJsonModule": true,
// "esModuleInterop": true

result:

>

{ name: 'John', age: 30, car: 'ferrari2' }

Answer 2

After experimenting with different configurations, I discovered that the final two settings provide the desired outcome.

jsondata.json:

{
    "name": "John",
    "age": 30,
    "car": "ferrari2"
}

When resolveJsonModule is set to true without esModuleInterop and importing without *, it results in an error.

main.ts:

import j from './jsondata.json';
console.log(j);

tsconfig.ts:

"resolveJsonModule": true,
// "esModuleInterop": true

result:

>

{ name: 'John', age: 30, car: 'ferrari2' }

Module ... can only be default-imported using the 'esModuleInterop' flag

Setting both flags to true and using * import displays the default value

main.ts:

import * as j from './jsondata.json';
console.log(j);

tsconfig.ts

"resolveJsonModule": true,
"esModuleInterop": true

result:

>

{
  name: 'John',
  age: 30,
  car: 'ferrari2',
  default: { name: 'John', age: 30, car: 'ferrari2' }
}

When both flags are set to true without using *, the default value is not shown

main.ts:

import j from './jsondata.json';
console.log(j);

tsconfig.ts:

"resolveJsonModule": true,
"esModuleInterop": true

result:

>

{ name: 'John', age: 30, car: 'ferrari2' }

Using resolveJsonModule as true and no esModuleInterop with * import does not display a default value

main.ts:

import * as j from './jsondata.json';
console.log(j);

tsconfig.ts:

"resolveJsonModule": true,
// "esModuleInterop": true

result:

>

{ name: 'John', age: 30, car: 'ferrari2' }

What is the process for eliminating the perplexing "default" attribute that has been inserted into JSON?

Answer №1

When resolveJsonModule is set to true without esModuleInterop and importing without *, it results in an error.

Setting both flags to true and using * import displays the default value

When both flags are set to true without using *, the default value is not shown

Using resolveJsonModule as true and no esModuleInterop with * import does not display a default value

Similar questions

A Guide to Iterating Through Arrays of Objects Using TypeScript

HTML Elements for Displaying Undefined JSON Information

The encoding function in xCode5 does not work properly with JSON

DxDataGrid: Implementing a comprehensive validation system for multiple edit fields

Tips for printing a jq JSON format while properly escaping double quotes using backslashes

Change the input field to uppercase using JavaScript but do not use inline JavaScript

Pressing a button that appears multiple times and is also embedded within layers

What is the best way to showcase the outcomes of arithmetic calculations on my calculator?

The ASP.net WebMethod seems to be providing a full page output instead of the expected JSON data

What is the best way to integrate ag-grid with Observable in Angular 2?

Converting JSON object to an array or list using deserialization

Creating a Typescript interface where one property is dependent on another property

HTML code is not displayed within the ng-template

Transforming AngularJS 2.0 code into ES6 syntax

React's memo and/or useCallback functions are not functioning as anticipated

When using @testing-library/react (rtl), the 'waitFor' function achieves success even without the need for the 'await' keyword

Converting Wordpress JSON data into a UITableView for iOS development

Understanding the use of JSON and JavaScript is proving to be quite a challenge for me

Ways to initiate a fresh API request while utilizing httpClient and shareReplay

Ways to differentiate between the sources of two cold Observables (not just the possible data streams they may produce)