I received an error message stating
Property 'map' does not exist on type 'string | string[]'const data = [
['1', ['11']],
['2', ['21']],
['3', ['31']],
]
data.map(topic => {
topic[1].map(p => console.log(p))
})
How can I resolve this issue while keeping the code functionality intact?
This query pertains to a JavaScript code snippet in an Astro project, and TypeScript is not being used.
It has been highlighted by other responses that converting the file to TypeScript allows for explicit data typing:
const data: [string, string[]][] = [
["1", ["11"]],
["2", ["21"]],
["3", ["31"]]
];
If you prefer to keep your file as JavaScript, you can still provide explicit data typing using JSDoc syntax, which is widely recognized by most IDEs.
/**
* @type {Array<[string, string[]]>}
*/
const data = [
['1', ['11']],
['2', ['21']],
['3', ['31']],
]
data.map(topic => {
topic[1].map(p => console.log(p))
})
When TypeScript encounters the array ['1', ['11']], it infers the type as (string | string[])[]. The problem arises because the .map method is applicable to arrays but not strings.
as const at the end of the array declaration.const data = [
['1', ['11']],
['2', ['21']],
['3', ['31']],
] as const
data.map(topic => {
topic[1].map(p => console.log(p))
})
.map method, always verify the type beforehand:const data = [
['1', ['11']],
['2', ['21']],
['3', ['31']],
]
data.map(topic => {
if (Array.isArray(topic[1])) {
topic[1].map(p => console.log(p))
}
// OR
if (typeof topic[1] === "string") {
doSomething()
} else {
topic[1].map(p => console.log(p))
}
})
content is automatically determined as (string | string[])[][] by the TypeScript compiler as a default setting. This type is not precise enough to use array methods like .map() on an element because TypeScript sees each item in the data array as either a string or a string[].
To address this issue, you need to specify the type of data more accurately. You can achieve this by using an Explicit Type Annotation...
const data: [string, string[]][] = [
["1", ["11"]],
["2", ["21"]],
["3", ["31"]]
];
... or by utilizing a const-assertion. This method will ensure that TypeScript assigns the most specific type to your variable.
const data = [
["1", ["11"]],
["2", ["21"]],
["3", ["31"]]
] as const;
data.map(topic => {
topic[1].map(p => console.log(p));
});
I am looking to display different sliders based on the time of day. For instance, 'slider set 1' from 0-9am, 'slider set 2' from 9am-12pm, and so forth. I am new to java script and need assistance in solving this challenge. Below is the ...
I have developed a basic react application featuring a contact form. Upon submission, I aim to display the Google Code for the lead Conversion Page within the application. <!-- Google Code for Purchase Conversion Page --> <script type="text ...
As I navigate through a next.js page, I often notice a noticeable delay between triggering a router.push and the subsequent loading of the next page. How can I accurately measure this delay? The process of router push involves actual work before transitio ...
I used arrays of strings to populate drop-down menus. Is there a way to automatically set the value of each option to match the text content? el.value = opt; seems to be ineffective. var validCoursesKeys = ['opt 1','opt 2','opt ...
My goal is to select a photo from a folder and display it on a webpage, but I have struggled to find a working solution. Can this be achieved using just basic HTML, CSS, and JS? I am new to web development, so please forgive me for any beginner questions. ...
I am facing an issue with feeding JSON data into datatables when the search button is clicked. The JSON data structure is as follows: [ { "port_code":"BOM", "cont_details_id":"9", "price":"44.000", "cont_price":"500", "c ...
For instance: var array = ["apple", "banana", "cherry", "date", "elderberry", "fig"]; What is the best way to determine if "apple", "banana", and "cherry" are present in the array? I attempted using the indexOf() method but struggled to check for multip ...
Hello there I am currently working on minimizing repetitive code in my react application by utilizing Redux state. After choosing the Redux structure to use (refer to Context), I now aim to make it more concise. To achieve this, I have developed a generic ...
I am currently developing my own version of Tetris. My main focus at the moment is creating a function that can rotate a 2D variable array by 90 degrees (or -90). For instance, if we have an array like: "-T-", "TTT" The expected outpu ...
I am currently working on implementing nodemailer for sending emails. However, I noticed that if the email address in the "to" field is incorrect, the email is not sent as expected. The issue is that there is no error displayed and the function still resol ...
Struggling with a tough exercise question, I could use some help deciphering it. https://i.stack.imgur.com/V5he2.png Here is how I've started the code: <!DOCTYPE html> <html> <head> <title></title> <script> fun ...
Apologies in advance, as this is my first attempt at coding a website. I have a specific need where I want to update only one div on my web page when a link in the navigation bar is clicked. <body> <div id="wrapper"> <header id= ...
Struggling with a perplexing issue. I'm utilizing Ajax to send data from my Javascript to a Flask server route for processing, intending to then display the processed data in a new template. The transmission of data appears to be smooth from Javascrip ...
When working with the jsonwebtoken library to verify tokens in my module, I encountered a situation where the verify method is exported multiple times with different signatures. export function verify(token: string, secretOrPublicKey: Secret, options?: Ve ...
Just starting out with jsp and using Glassfish server via netbeans. Struggling to link my jsp file with css and javascripts. Below is the structure of my files: Web Pages --Web-Inf --assets --css --style.css --js --jquery.js ...
I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...
Working on integrating the "in-app-browser" plugin with my Ionic project. Check out the code snippet below: const browser = this.iab.create(mylink, '_blank'); browser.on('loadstop').subscribe( data => { if ...
Is there a way to delay calling the owlCarousel function for 5 seconds? I attempted the following: $(document).ready(function(){ setInterval(function(){ $(".demo-slide").owlCarousel(); },5000); }); However, I encountered ...
I'm currently working on a signup page and I need to verify if an email address already exists in the database. var emailnum = getEmailCount(`select * from contactinfo where email='${email}'`); console.log(emailnum); // Output shows ...
Issue: I am looking for a way to consolidate the multiple arrays returned individually into a single array. Solution: fetchAllRiders() { var distanceObs = Observable.create(observer => { this.http.get(this.API + '/driver/all').map(res = ...