When I receive a query string in one of my REST endpoints using koa-router, each value of the query string object parameter is always a string:
{
count: "120",
result: "true",
text: "ok"
}
Within my codebase, I have an Interface that represents the query string object:
interface Params {
count: number;
result: boolean;
text: string;
}
I aim to convert the query string object so that all values match this interface. What are the best practices for accomplishing this?
It's unusual to receive numbers and booleans as strings, given that JSON allows unquoted values for both numeric and boolean data types.
The JSON.parse() method includes an optional reviver callback parameter, which you can utilize within a request interceptor to standardize string representations of numbers and booleans before they reach your interface.
const data = `{
"count": "120",
"resut": "false",
"text": "ok"
}`
const reviver = (key, value) => {
if(typeof value === 'string' && !isNaN(value)){
return Number(value)
}else if(value === 'true' || value === 'false'){
return value === 'true' ? true : false;
}
return value;
}
console.log(JSON.parse(data, reviver ))To ensure the input aligns with the expected interface, it is important to convert each property to the correct type.
function convertInputToParams(input:any) : Params {
var obj = typeof input === "string"
? JSON.parse(input)
: input;
obj.count = +obj.count;
obj.result = obj.result === "true" ? true : false;
return obj as Params;
}
An alternative approach would be to create a default instance of Params with predefined properties, then iterate over them to verify that each property in the converted object matches the expected type.
function convertInputToInterface(example:any, input:any) {
Object.keys(example).forEach(function(key,index) {
if (!input[key]) return;
let exampleType = typeof example[key];
let inputType = typeof input[key];
if (exampleType !== inputType) {
if (exampleType == "string") input[key] = input[key] + "";
if (exampleType == "number") input[key] = +input[key];
if (exampleType == "boolean") input[key] = input[key] === "true" ? true : false;
// Handle other cases as needed
}
});
return input;
}
swagger ui https://i.stack.imgur.com/UIavC.png I've been struggling to resolve this issue where the /swagger endpoint seems to only partially read the swagger.json file. Despite configuring everything correctly, no errors are appearing. It simply dis ...
Recently, while working on my project with Next.js, I encountered an issue where I was trying to access data but kept getting undefined. Below is the code snippet that I was working with: function Home({books}) { console.log(books) return <div>Home ...
In the code snippet below, I am utilizing the useEffect hook to monitor changes to a percentage variable and then initiating a timer to increment that variable every second. This process starts as soon as the page loads. The percentage variable is crucial ...
I am trying to enhance the Tab component using ES6 class in this way: import React from "react"; import {Tab} from "material-ui"; class CustomTab extends Tab { constructor(props){ super(props); } render(){ return super.rende ...
Is there a straightforward method for rotating a vector-based map on CANVAS in order to integrate it into a browser navigation system? ...
I recently started using typescript and encountered an issue while working on a problem. I initially created the following class: export class ModuleInfoContainer extends Array<ModuleInfo> { constructor() { super(); } search(id: number) { ...
I'm looking for a way to alphabetically sort an unordered list while still keeping the outer html intact. My current method sorts the list alphabetically, but it only reorganizes the inner html of the list elements and not the entire element itself. T ...
My current project is using Angular 6 and I am working on creating a list of buttons on the left panel such as "Ice cream", "Pop corns", and more. The goal is for users to click on these buttons which will then change the URL of the add button located in t ...
Is there a way to create copies of selected divs within the same panel using a Javascript report designer? I attempted to achieve this by using the following code snippet: function DesignerClone() { $(".ui-selected").each(function () { va ...
Surprisingly, it seems that the canvas API does not support applying gradients to shadows in the way we expect: var grad = ctx.createLinearGradient(fromX, fromY, toX, toY); grad.addColorStop(0, "red"); grad.addColorStop(1, "blue"); ctx.strokeStyle = gra ...
Based on information from this StackOverflow post The process of changing the DOM occurs synchronously, while rendering the DOM actually takes place after the JavaScript stack has cleared. Furthermore, according to this document from Google, a screen r ...
While reviewing code done by a previous developer who is no longer with us, I observed that they sometimes used Object.assign({}, xyz) and other times they used Object.assign([], abc); Could there be a distinction between the two methods? ...
I am currently faced with the challenge of handling two requests simultaneously. The first request involves executing a lengthy PHP script that takes 10 minutes to complete (I cannot modify it using JavaScript, so that's not an option). The second ...
I'm facing an issue with a project that has the following layout: project | - public | - -index.html src | - -index.js The code I am using to import the file is as follows: <script src="../src/index.js"></script> H ...
Utilizing THREE.js with Typescript allows you to use identical names for types and code. For instance: import * as THREE from '/build/three.module.js' // The following line employs THREE.Scene as type and code const scene: THREE.Scene = new THRE ...
I am working with a json code that looks like this: [[1385420403000,9.86,6.91],[1385506802000,11.89,6.57],[1385593203000,14.11,10.58],[1385679602000,9.1,8.9],[1385766003000,13.59,7.53],[1385852402000,10.68,6.69],[1385938803000,11.03,10.52],[1386025202000, ...
I have a situation where I want the user to click a button in order to print an object obtained from a web service into a table. The issue is that currently, I have to click the button twice for it to work properly. Here's some more detail: The button ...
I am currently working on a form that populates a table with data retrieved from a Laravel API. I am using Vue.js 3 and Composition API to build my entire application. When the button is clicked, I want the table to be filled with data from the form. The b ...
Recently, I've dived into the world of writing automated tests for a React application. Along the way, I encountered some intriguing questions about the best approach to testing a series of interactions within the app. Let's imagine a scenario w ...
Currently, I am developing an interactive display that utilizes sensors on a raspberry pi. The display is set to show a webpage and I have implemented a python script to handle sensor interaction. My goal is to change the displayed web page when a user p ...