Form a hierarchical data structure using a combination of three arrays

Here are three sets of data:

let firstData = [ {key: value1}, {key: value2}, {key:value3} ]
let secondData = [ {key: value1}, {key: value2}, {key:value3}, {key: value4} ] //same structure, different values
let thirdData = [ [1,1,1,1], [1,1,1,1], [1,1,1,1] ]

I am looking for a specific data structure like this:

result = {
           firstData[0][key] : {
              secondData[0][key2] : thirdData[0][0],
              secondData[0][key2] : thirdData[0][0],
              secondData[0][key2] : thirdData[0][0]
         }

I attempted to create the desired structure as follows but encountered issues:

let result = {};
firstData.map( (d, i) => {
     thirdData[i].map(
       (x,idx) => (
        result[d.key] = {
          secondData[i]['key'] : x
         }
       )
      ) 
})

Answer №1

Here's the corrected version:

const updatedResult = {};
array1.map((element, index) => {
  updatedResult[element.id] = {};
  array3[index].map((value, idx) => (updatedResult[element.id][array2[idx]["id"]] = value));
});

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

What is the reasoning behind defaultValue possessing the type of any in TextField Material UI?

According to the Material UI guidelines, the component TextField specifies that its defaultValue property accepts the type any. I decided to experiment with this a bit and found that in practice, defaultValue actually supports multiple types. You can see ...

Is it possible to create an HTML link that prevents users from navigating back to the previous page or displaying the previous link in their browsing history?

I've been tasked with creating a button on a client's website that links to another page, like Google, for the purpose of assisting someone seeking help in case of an emergency. The challenge is finding a way to prevent the user from easily retur ...

Discover the method for obtaining a selected element in a bootstrap dropdown that is dynamically populated

Similar to the question asked on Stack Overflow about how to display the selected item in a Bootstrap button dropdown title, the difference here is that the dropdown list is populated through an ajax response. The issue arises when trying to handle click ...

When it comes to TypeScript, one can always rely on either event.target or event

I'm a beginner with TypeScript and currently in the process of refactoring an arrow function within React.js. Here is the current implementation: handleChange = (event): void => { const target = event.target || event.srcElement; this.s ...

Ways to showcase multiple elements using introjs

I am attempting to highlight multiple DOM elements using the JS library intro.js, but I am encountering an issue. It seems that I can only define one element to be highlighted at a time. introjs.setOptions({ steps: [ { ...

Service Worker Tips: Caching the initial page with dynamic content

I have a single-page application with a dynamic URL generated using a token, for example: example.com/XV252GTH, which includes various assets such as CSS and favicon. This is how I implement the Service Worker registration: navigator.serviceWorker.regist ...

Permitting the inclusion of decimals in the isNaN function

My script currently has the capability to input a number in one textbox and calculate its equivalent in other textboxes. $("input[type=text]").keyup(function () { var number = parseFloat($(this).val()); var inc = parseFloat($(this).attr( ...

Utilizing the Power of AJAX in Combination with an Event Loop

I have a function that is supposed to make AJAX requests with an event loop while taking 9 inputs at the top and querying them from a database. Currently, it only logs to the console but will eventually perform more actions. However, I am encountering an ...

Parsing the CSV file contents according to the specified columns

Currently, I'm involved in a project using AngularJS where I need to extract data from a CSV file column by column using JavaScript. So far, I've successfully retrieved the CSV data and displayed it in the console. While I've managed to sepa ...

Sending various types of data to an MVC C# controller using AJAX

Currently, I am utilizing AJAX to retrieve information from a Razor View and forward it to the controller. Although everything is functioning as expected, I now face the challenge of passing an array along with a string as the data: // View - JavaScript v ...

Splitting strings using multiple delimiters in PHP

Here's the structure of my array: {flower},{animals},{food},{people},{trees} I would like to separate the words within curly brackets. This is the code I've used: $array = explode("},{", $list); Upon running this code, the $array loo ...

Error: The function screams cannot be accessed in this.state in React JS when using Firebase

This is the code I am working on and I need help to solve a problem: import React, { Component } from 'react' import Grid from '@material-ui/core/Grid'; import axios from 'axios'; class home extends Component { state = { ...

"Utilizing Ajax for Form Validation in Zend Framework 2 - Is it

After following a tutorial, I encountered an issue with my code. The tutorial I followed can be found at the following link: I need help resolving the problem in my code. When I submit the form, the function to validate and save the data is being called ...

Toggle the sliding menu drawer option (upward/downward motion)

When it comes to my simple menu, I'm using jQuery to toggle the visibility of a few DIVs. The code is straightforward as shown below, and I could really use some assistance with adding extra functionalities. <div id="one" class="navLinks"> cont ...

Making a POST request using axios in a MERNStack application

After successfully using the express router to add articles with Postman, I encountered an issue when trying to send article information through Axios to MongoDB. Despite no errors appearing in the console, there was a message stating "SharedArrayBuffer ...

Issue with Vue3: The imported module is not defined

Update: I recently downgraded vue-cli to version 4.5.19 and now the code is functioning properly. It seems like there might be an issue related to vue-cli or its dependencies. I encountered a problem while working on a simple vue.js project using vue-cli. ...

Data merging in Firebase 9 and Vue 3 is not functioning properly

I am facing an issue with merging data in my firebase database. I consulted the documentation at https://firebase.google.com/docs/firestore/manage-data/add-data for guidance. After attempting to merge data using setDoc, I encountered an error (Uncaught Ty ...

Executing a message in Azure Service Bus using Javascript/Node.js

I am utilizing the @azure/service-bus library in a Node.js application to receive messages. The code I am using is as follows: const { ServiceBusClient } = require("@azure/service-bus"); const sbClient = new ServiceBusClient(connectionString); ...

How can I utilize the "remark" tool to handle Markdown files with URLs that don't adhere to Markdown formatting? Are there any supplemental plugins available for this

My markdown file has frontmatter and sometimes includes inline URLs that are not properly formatted with markdown syntax. I'm looking for a way to handle these non-markdown URLs within the markdown file - possibly by parsing them into HTML URLs using ...

Explore how to set up Express with React without resorting to using create-react

I am familiar with the react and Node.js Express bundle, but I require assistance. While this question may have been posed by someone else before, I have not come across a similar query within the same framework. The specific question is: How can queries ...