Creating a TypeScript object with fields arranged in the order they were added

Currently, I find myself in a perplexing predicament where I am required to construct an object with unspecified properties that must maintain the order of insertion. This necessity arises from the fact that I need to transmit this object to a server over which I have no jurisdiction. For illustration:

{
  "sfwd-lessons": {
    "256": {
      "sfwd-topic": {
        "270": {
          "sfwd-quiz": []
        }
      },
      "sfwd-quiz": {
        "289": []
      }
    },
    "255": {
      "sfwd-topic": [],
      "sfwd-quiz": []
    }
  },
  "sfwd-quiz": []
}

Due to the automatic sorting of properties within objects, I encounter a challenge where the entries "256" and "255" interchange positions when attempting to send the object. Despite my endeavors using various methods such as:

  • Record<string,any> //originally utilized for object creation
  • Map //when integrated into an object, it became void
  • Developing custom type //yielded identical outcome as Record<string,any>

I am currently at a loss for a viable solution.

typescriptlearndash

Answer №1

If you're worried about the order being maintained because of your interaction with a server API, it's likely that you're encoding your data structure as a string. To have complete control over the order, you could manually encode the data yourself instead of using JSON.stringify on an object.

In JavaScript, Map objects preserve the order in which keys are inserted, so you can encode your data like this:

const data = new Map()
data.set("sfwd-lessons", new Map())
// ...

You can then convert it into a JSON string by constructing a string from the map's contents. Since it maintains insertion order, you can easily iterate over it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty transferring data between components using @Input syntax

I am having trouble passing the FailedProductId from Component1 to Component2 using @Input. Below is the code snippet: export class Component1 implements OnInit { public FailedProductId="produt"; constructor(private employeeService: ProductService) {} ...

angulartypescriptcomponents

When attempting to import a react component written with TypeScript to npm, receiving an 'undefined' error

I recently encountered an issue when trying to publish my custom React component developed with TypeScript on npm. Although the publishing process was successful, I faced an error upon importing the npm package into a new React project: Error: Element ty ...

reactjstypescriptnpmwebpacknpm-publish

How can I turn off automatic ellipsis on my IOS device?

Currently, I am working on a web application that involves displaying location descriptions retrieved from an API. The issue I am encountering is that the description is being cut off with an ellipsis after a certain number of lines when viewed on an iPhon ...

htmlcssiostypescriptionic-framework

Develop instances from a class in Angular 2

Hello there! I have a question about creating a class that implements an interface and utilizes data from a .get service to instantiate a new object. Here is an example of what I'm trying to achieve: import { Component, OnInit } from '@angular/c ...

classangulartypescript

Is there a more efficient approach to creating a Typescript XML parser that does not rely on PropTypes?

I'm currently designing the architecture for a web application that will require the consumption of SOAP APIs in hundreds, if not thousands, of instances. These implementations will be developed by 200-300 different developers over a span of several y ...

typescripttypes

Tips for parsing text responses in React to generate hyperlinks and emphasize specific words

I'm currently tackling a React project and facing an interesting challenge. I have a text response that needs to be parsed in a way that all URLs are automatically turned into clickable hyperlinks (using anchor tags). Moreover, there's a requirem ...

reactjstypescript

What is the best way to retrieve a Map object from Firebase in a TypeScript environment?

Currently, I am working on a cloud function in TypeScript, where I am attempting to retrieve a Map object (also known as nested objects or maps) from Firebase in order to iterate through it. Here is the structure of my Firebase data: https://i.sstatic.ne ...

typescriptfirebasegoogle-cloud-platformgoogle-cloud-firestoregoogle-cloud-functions

Error: Trying to access a property that does not exist on an undefined object (retrieving 'kind

Currently, I am working on a project using angular-CLI. When I attempted to create a new module yesterday, an error popped up in the terminal saying Cannot read properties of undefined (reading 'kind') (only this error there wasn't an ...

angulartypescriptangular-cli

Accessing Child Properties in Parent Component using Typescript

New to the world of Typescript! Imagine having a component called TitleSubtitle that consists of both a Title and a Subtitle component. The Title component comes with props: interface TitleProps { text: string; } The Subtitle component also has props ...

javascriptreactjstypescript

Lazy Loading Child Components using Angular 2+ Router

I've been attempting to implement lazy loading on a children route that is already lazy loaded, but I haven't had any success so far. Here is the route structure I am working with: const routes: Routes = [ { path: 'customers', ...

angulartypescriptangular-ui-router

How can we pass an optional boolean prop in Vue 3?

Currently, I am in the process of developing an application using Vue 3 and TypeScript 4.4, bundled with Vite 2. Within my project, there exists a file named LoginPage.vue containing the following code: <script lang="ts" setup> const props ...

typescriptvue.jsvuejs3vite

An issue has been encountered within the node modules directory at the path node_modules/@angular/flex-layout/extended/typings

I encountered an error in my Angular 6.0.8 application while using Angular CLI and running from VSCode. ERROR in node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(72,67): error TS1144: '{' or '; ' expected. no ...

htmlangulartypescriptangular-flex-layout

I believe there may be a gap in the communication between TypeScript, JavaScript, Angular, Nginx, Alpine, and Docker within the network using Nginx. I am

After transitioning to Docker in order to create a virtual network to mimic a real network (using a bridge type with DNS that resolves the FQDN correctly to the corresponding IP), I encountered the following errors in the console.log - no data is being dis ...

javascripttypescriptpostgresqlexpressnginx

how to use all parameters except the first one in TypeScript

Is there a way to reference one function's parameter types in another function, but only use a subset of them without repeating the entire list of parameters? //params of bar should be same as foo, except p1 should be a different type function foo(p1 ...

typescript

Is it possible to get intellisense for Javascript in Visual Studio Code even without using typings?

Is it possible to have intellisense support in Visual Studio Code for a 3rd party library installed via npm, even if there is no typings file available? I have noticed this feature working in IntelliJ/Webstorm, so I believe it might be feasible. However, ...

typescriptvisual-studio-code

Throttle the asynchronous function to guarantee sequential execution

Is it possible to use lodash in a way that debounces an async function so it runs after a specified delay and only after the latest fired async function has finished? Consider this example: import _ from "lodash" const debouncedFunc = _.debounc ...

javascriptnode.jstypescriptasync-awaitlodash

What is the correct way to employ async/await in combination with Array.filter within a React application?

I'm currently in the process of developing a basic currency converter using React and Typescript. Below is a snippet of my component code: const App = () => { const [countries, setCountries] = useState<Array<CountriesProps>>([]) co ...

javascriptreactjstypescriptasync-awaitreact-hooks

Express and TypeScript: Cannot find property 'rawBody' on type 'IncomingMessage'

Inside my src/app.ts file, I have the following code: import express from 'express'; import bodyParser from 'body-parser'; const app = express() app.use(bodyParser.json({ verify: (req, res, buf) => req.rawBody = buf })) However, I ...

node.jstypescriptexpress

Creating a Dynamic Table with Angular 6 - Automating the Population of Content Values

I have a task of populating a table with data from a JSON file. Take a look at the following code snippet: <table> <thead> <tr> <th *ngFor="let datakeys of listData[0] | keys">{{ datakeys }}</th> </tr> < ...

angulartypescriptangular6

Issue with KeyboardDatePicker in Material-UI/Pickers occurs when InputAdornmentProps property with position start is added, leading to an unexpected margin

I am currently working with a component from material-ui/pickers and this is the code snippet: <KeyboardDatePicker value={selectedDate} onChange={(_, newValue) => handleClick(newValue)} labelFunc={renderLabel} disableToolbar variant=&a ...

cssreactjstypescriptdatepickermaterial-ui