Changing a string-stored array into a List object in JavaString

Here is a messy nested list that I need to convert into a list of numbers:

nested_list = [
  ["[63]"],
  ["[61]"],
  ["[7]"],
  ["[63]"],
  ["[80, 18]"],
  ["[80, 43, 18, 20]"]
]

I know it's a mess, but I have to work with this data. The desired output should look like this:

[63, 61, 7, 63, 80, 18, 80, 43, 18, 20]

Is there a way to achieve this with minimal looping?

I tried using `flat()` on the nested list like this: nested_list .flat(2), which gave me:

[ '[63]', '[61]', '[7]', '[63]', '[80, 18]', '[80, 43, 18, 20]' ]

I also attempted a combination of reduce and concat based on this but ran into issues since the items are in string format. Any suggestions on how to proceed would be appreciated.

Answer №1

.flatMap() along with JSON.parse() can easily handle this task

const nested_list = [
  ["[63]"],
  ["[61]"],
  ["[7]"],
  ["[63]"],
  ["[80, 18]"],
  ["[80, 43, 18, 20]"]
];

const result = nested_list.flatMap(JSON.parse);

console.log(result)

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

Javascript: recursive function fails to return existing value

I'm attempting to recursively loop through an array in search of a key that matches a specified regex pattern. Once the condition is met, the loop should halt and return the value of the key. The issue I am facing is that although the loop stops corr ...

After combining two files in browserify, the error message "XXX.foo is not a function" appeared

When using browserify to bundle two JavaScipt files into one with the command: browserify X1.js X2.js --standalone XXX > bundle.js The file X1.js contains a function like this: function foo() { console.log("something") } And it is being exported i ...

Trigger a unique event using Vanilla JS and then detect it on Vue instances

I am currently in the process of incorporating multiple Vue instances into my website. I have encountered issues preventing me from making the entire website a Vue instance and using components due to potential conflicts and other complications. For examp ...

Methods to Maintain Consistent HTML Table Dimensions utilizing DOM

I am facing an issue with shuffling a table that contains images. The table has 4 columns and 2 rows. To shuffle the table, I use the following code: function sortTable() { // Conveniently getting the parent table let table = document.getElementById("i ...

Utilize Python to match the most similar string from List A to List B by calculating Levenshtein distance, preferably with the help of pandas

Hey there, I am relatively new to python and my main experience lies in using pandas for data analysis. Currently, I have two lists each containing over 100 entries - one called "Keywords" and the other named "Groups". My goal is to create an output (pre ...

Obtaining an address using latitudes and longitudes with React Google Maps

I created a map using the react-google-map plugin where users can drag the marker to get the latitude and longitude of a location. However, I am only able to retrieve the lat and lng values and not the address. How can I obtain the address as well? Take a ...

An improved method for generating a jQuery selection

I developed a custom plugin to extract a specific segment of a collection: jQuery.range = function(start, end, includingTheLast) { var result = $([]), i = 0; while (!this.eq(i).is(start) && i < this.length) i++; for (; i & ...

How to display a video with full height and width using CSS or JavaScript

I am trying to incorporate an html5 video (using the video tag) with 100% width and 100% height to play in the background. I have seen an example using an image, but I want to achieve the same effect with a video. Here is the code I have so far: #video { ...

What is the best way to integrate Emotion styled components with TypeScript in a React project?

Currently, I am delving into TypeScript and attempting to convert a small project that utilizes Emotion to TypeScript. I have hit a roadblock at this juncture. The code snippet below export const Title = styled.div(props => ({ fontSize: "20px", ...

Navigating by Typing in the URL Bar in React

Whenever I paste a valid URL and press enter, the useEffect function in the parent component does not get triggered. However, if I reload the page, it works fine. Here is the code snippet: Routing path <Route path="/search" element={<Searc ...

Are there any alternatives to ui-ace specifically designed for Angular 2?

I am currently working on an Angular2 project and I'm looking to display my JSON data in an editor. Previously, while working with AngularJS, I was able to achieve this using ui-ace. Here is an example of how I did it: <textarea ui-ace="{ us ...

Exclude previous dates from the front end of ACF date picker

I am using Advanced Custom Fields to post job ads, and I have incorporated a date picker field for the end date of each job ad. <?php if (have_rows('jobs', 'option')): ?> <?php $now = time(); ?> <div i ...

Limiting the DatePicker in React JS to only display the current year: Tips and Tricks!

I'm currently implementing the KeyboardDatePicker component in my React application to allow users to choose a travel date. However, I am looking to restrict the date selection to only the current year. This means that users should not be able to pick ...

When _.template is evaluated in Node JS, it freezes and encounters a ReferenceError causing the program to halt

I've noticed a strange issue when using http://underscorejs.org/ with Node JS: If a reference error occurs while evaluating a template function, Node JS will become unresponsive! Examples: EXAMPLE 1: SUCCESSFUL SCENARIO: var template = "<%= tes ...

How can I prevent SweetAlert from automatically focusing when it first opens?

I recently integrated SweetAlert into my project and customized the buttons like this: swal("A wild Pikachu appeared! What do you want to do?", { buttons: { cancel: "Run away!", catch: { text: "Throw Pokéball!", value: "catch", ...

Is there a way to gather selected checkboxes from all child checkbox components in vue?

I have a unique setup where my table rows are generated by child components, each containing a checkbox. I am looking for a way to retrieve all the checked checkboxes at once without using two-way binding or updating an array on the parent component. Here ...

Leverage a custom server (such as NestJS) within NextJS to dynamically render targeted pages

I am experimenting with using NestJS as a custom server for NextJS, following the instructions in this article. Here is a simplified version of the code: @Controller('/') export class ViewController { @Get('*') async static(@Req() r ...

What is the best way to apply various styles using the ng-style directive in different scenarios?

When working in Angular, I am attempting to apply different style attributes based on varying conditions. However, the typical conditional expression method is limited to just two conditions and is not providing the desired results. <div ng-style=" ...

Sequential execution of multiple useState updates when an update triggers a re-render

Can you explain why the function setPeople is being executed after setFirstName, setEmail, and after the event handler has been exited? const [firstName, setFirstName] = useState(''); const [email, setEmail] = useState(''); const [peopl ...

The error code 13:5 indicates that the "Home" component has been registered in the Vue application but is not being used, leading to the error message "vue/no-unused-components"

I encountered this issue while working with Vue for the first time. I was attempting to construct a website using Vue/CLI by reorganizing and building from the inside out. However, I am unfamiliar with Vue and unsure how to resolve this error. The changes ...