What is the process of importing JSON data into a TypeScript Map<K, V> type?

Question

What is the process of importing JSON data into a TypeScript Map<K, V> type?

I'm facing a challenge in importing JSON data that may include mappings which could be either present or absent within one of the properties. I initially thought that using Map<string, number> as the correct data type to represent this scenario would work, but unfortunately, I encounter an error when attempting to do so.

The structure of my JSON file, named data.json, is shown below:

{
    "datas": [
        {
            "name":"test1",
            "config":"origin",
            "entries": {
                "red":1,
                "green":2
            }
        },
        {
            "name":"test2",
            "config":"remote",
            "entries": {
                "red":1,
                "blue":3
            }
        },
        {
            "name":"test3",
            "entries": {
                "red":1,
                "blue":3,
                "purple":3
            }
        }
    ]
}

The TypeScript code in Data.ts responsible for reading this data appears like this:

import data from './data.json';

export class Data {
    public name:string;
    public config:string;
    public entries:Map<string, number>;
    constructor(
        name:string,
        entries:Map<string, number>,
        config?:string
    ) {
        this.name = name;
        this.entries = entries;
        this.config = config ?? "origin";
    }
}

export class DataManager {
    public datas:Data[] = data.datas;
}

However, the final line,

public datas:Data[] = data.datas;

, ends up causing an error.

This raises the question - what is the proper way to import such data?

The main objectives here are threefold:

Any time entries is present, it should undergo some form of validation to ensure it only consists of properties of type number. The specific properties remain unknown to the programmer, but will be significant to the end user.
If config is missing in the JSON file, the creation of Data objects should default to a preset value (in this case, "origin")
The process of assigning the data must be streamlined and free of unnecessary boilerplate code. In the event that Data gains a new property in the future (and there may or may not be corresponding updates to the data within Data.json), there shouldn't be a need to alter how DataManager.data fetches the values

Is this feasible, and if so, what is the right approach to writing code that achieves these objectives?

json typescript

Answer 1

Answer №1

If you're looking for a minimalistic approach, consider avoiding the use of classes for your data in JavaScript. Instead, opt for plain JavaScript objects and define strong types for your specific needs. For instance, rather than creating a Data class, you can define an interface. Similarly, instead of utilizing instances of the Map class with string keys, you can simply use an object with a string index signature to represent your existing data structure:

interface Data {
    name: string;
    config: string;
    entries: { [k: string]: number }
}

To create a valid instance of Data, there's no need to invoke the new operator; just construct an object literal with properties like name, config, and entries of appropriate types. The entries property indicates that the keys are strings and the values associated with those keys should be numbers.

Now, let's transform data.datas into an array of type Data[] while fulfilling your specified criteria:

const datas: Data[] = data.datas.map(d => ({
    config: "origin", // set default values
    ...d, // merge object properties    
    entries: onlyNumberValues(d.entries ?? {}) // filter non-numeric entries
}));

function onlyNumberValues(x: { [k: string]: unknown }): { [k: string]: number } {
    return Object.fromEntries(
        Object.entries(x).filter(
            (kv): kv is [string, number] => typeof kv[1] === "number"
        )
    );
}

The code snippet above updates the entries property by filtering the existing entries based on criteria. If entries doesn't exist, an empty object is used. This logic is implemented in the onlyNumberValues() function by leveraging methods like Object.entries(), user-defined type guards, and Object.fromEntries().
In cases where certain properties might be missing from the JSON data, setting default values is essential. By starting with default properties in an object literal and then spreading properties from the JSON object (as demonstrated with the config property), you ensure that any additional properties in the JSON object will also be included in the final result.
As new properties introduced in the JSON object are automatically merged, remember to specify defaults if needed. This way, the resulting object will contain all necessary properties along with their respective values.

Lets verify the functionality:

console.log(datas)

/* [{
  "config": "origin",
  "name": "test1",
  "entries": {
    "red": 1,
    "green": 2
  }
}, {
  "config": "remote",
  "name": "test2",
  "entries": {
    "red": 1,
    "blue": 3
  }
}, {
  "config": "origin",
  "name": "test3",
  "entries": {
    "red": 1,
    "blue": 3,
    "purple": 3
  }
}] */

Looks promising.

Playground link to view code

Answer 2

If you're looking for a minimalistic approach, consider avoiding the use of classes for your data in JavaScript. Instead, opt for plain JavaScript objects and define strong types for your specific needs. For instance, rather than creating a Data class, you can define an interface. Similarly, instead of utilizing instances of the Map class with string keys, you can simply use an object with a string index signature to represent your existing data structure:

interface Data {
    name: string;
    config: string;
    entries: { [k: string]: number }
}

To create a valid instance of Data, there's no need to invoke the new operator; just construct an object literal with properties like name, config, and entries of appropriate types. The entries property indicates that the keys are strings and the values associated with those keys should be numbers.

Now, let's transform data.datas into an array of type Data[] while fulfilling your specified criteria:

const datas: Data[] = data.datas.map(d => ({
    config: "origin", // set default values
    ...d, // merge object properties    
    entries: onlyNumberValues(d.entries ?? {}) // filter non-numeric entries
}));

function onlyNumberValues(x: { [k: string]: unknown }): { [k: string]: number } {
    return Object.fromEntries(
        Object.entries(x).filter(
            (kv): kv is [string, number] => typeof kv[1] === "number"
        )
    );
}

The code snippet above updates the entries property by filtering the existing entries based on criteria. If entries doesn't exist, an empty object is used. This logic is implemented in the onlyNumberValues() function by leveraging methods like Object.entries(), user-defined type guards, and Object.fromEntries().
In cases where certain properties might be missing from the JSON data, setting default values is essential. By starting with default properties in an object literal and then spreading properties from the JSON object (as demonstrated with the config property), you ensure that any additional properties in the JSON object will also be included in the final result.
As new properties introduced in the JSON object are automatically merged, remember to specify defaults if needed. This way, the resulting object will contain all necessary properties along with their respective values.

Lets verify the functionality:

console.log(datas)

/* [{
  "config": "origin",
  "name": "test1",
  "entries": {
    "red": 1,
    "green": 2
  }
}, {
  "config": "remote",
  "name": "test2",
  "entries": {
    "red": 1,
    "blue": 3
  }
}, {
  "config": "origin",
  "name": "test3",
  "entries": {
    "red": 1,
    "blue": 3,
    "purple": 3
  }
}] */

Looks promising.

Playground link to view code

What is the process of importing JSON data into a TypeScript Map<K, V> type?

Answer №1

Similar questions

The JMeter JSON Assertion does not allow paths to end with a dot or two dots

transition from mapStateToProps to using hooks

Why does Postman convert decimals to integers when displayed in "Pretty" view?

What is the best way to handle both json and jsonp responses in a node.js + Express application?

Node and Express app making a double POST request

Using Javascript to find, search for, and listen for timeupdate events with Mux

Can a WCF service utilize both the SOAP and JSON methods simultaneously?

The forwarded reference of the material-ui component is consistently empty

Disable the yellow curly error lines in Visual Studio Code

Exploring TypeORM: Leveraging the In() function within @ManyToMany relationships

Handling Click and Mouse Events with React [react-sortable-hoc, material-ui, react-virtualized]

Extract nested JSON data and load it into a pandas DataFrame

Encountering a Problem with HTTP Requests in Angular 2

Where should business logic be situated in ServiceStack applications?

Restricting the frequency at which a specific key value is allowed to appear in JSON documents

Specify the return type based on specific parameter value

transforming an array into JSON structure using node.js

NextJS 13 causes tailwind to malfunction when route group is utilized

Frozen objects in Typescript 2 behave in a variety of ways depending on their shape

Tips for resolving the error message when a JSON file is unable to open stream