Transforming a data array into JSON format with the help of a property mapping technique

I am attempting to transform a 2d array into a JSON object using a key map. The key map is defined as

var keys = ['id', 'title', 'customer.id', 'customer.name', 'customer.phone.home', 'customer.phone.mobile' ];

and the data looks like this:

var data = [
  [1, 'Task 1', 'C1', 'Customer 1', '999', '8888'],
  [2, 'Task 2', 'C2', 'Customer 2', '333', '5555']
];

The desired JSON output should be:

    var output = [
   {
      "id":1,
      "title":"Task 1",
      "customer":{
         "id":"C1",
         "name":"Customer 1",
         "phone":{
            "home":"999",
            "mobile":"8888"
         }
      }
   },
   {
      "id":2,
      "title":"Task 2",
      "customer":{
         "id":"C2",
         "name":"Customer 2",
         "phone":{
            "home":"333",
            "mobile":"5555"
         }
      }
   }
];

I have attempted to implement it in the following way but I am struggling with recursion. Can anyone provide assistance?

function arrToJSON(headers, data){
  var output = [];
  data.forEach(row, index){
    var cObj = {};
    headers.forEach(header, itemIndex){
      var headerParts = header.split('.');
      // Not sure what to do here
    }
  }
}

Answer №1

To achieve the desired outcome, utilize the map and reduce functions in JavaScript.

createObj(acc, curr.split("."), 0, o[index]);

The recursion function being utilized is:

Arguments

createObj(
      acc,                  // target object for value addition
      curr.split("."),      // path represented as an array
      0,                    // current index in path, initially zero
      o[index]              // value to assign
    );

var keys = [
  "id",
  "title",
  "customer.id",
  "customer.name",
  "customer.phone.home",
  "customer.phone.mobile",
];

var data = [
  [1, "Task 1", "C1", "Customer 1", "999", "8888"],
  [2, "Task 2", "C2", "Customer 2", "333", "5555"],
];

function createObj(obj, arr, index, value) {
  if (index === arr.length - 1) obj[arr[index]] = value;
  else {
    if (!obj[arr[index]]) obj[arr[index]] = {};
    createObj(obj[arr[index]], arr, index + 1, value);
  }
}

const result = data.map((o) => {
  return keys.reduce((acc, curr, index) => {
    createObj(acc, curr.split("."), 0, o[index]);
    return acc;
  }, {});
});

console.log(result);
/* This is not a part of answer. It is just to give the output full height. So IGNORE IT */

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

Answer №2

A convenient method is to utilize the destructuring and spread operator in combination with the reduce function.

var information = [
  [1, "Task 1", "C1", "Customer 1", "999", "8888"],
  [2, "Task 2", "C2", "Customer 2", "333", "5555"],
];

const createObject = (arr = []) => {
  return arr.reduce((acc, [id, title, cid, name, home, mobile]) => {
    const row = {
      id,
      title,
      customer: { id: cid, name, phone: { home, mobile } },
    };
    return acc.concat(row);
  }, []);
};

console.log(createObject(information));

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

Setting the state for an element in React after it has been mounted - a step-by-step guide

My React application features a user data form with a notification message that appears after submitting the form. The notification can be either a success or fail message, with the latter potentially containing multiple error types. I handle the error typ ...

The choice between invoking a function within a route handler or employing a middleware for the task

I am currently exploring a potential difference in coding approaches. Let me illustrate this with an example excerpted from the express documentation: https://expressjs.com/en/guide/using-middleware.html function logOriginalUrl (req, res, next) { console ...

What is the best method for adding files to JSZip from a remote URL?

Is it possible to load files into a Zip folder from a specified URL? For example: var zip = new JSZip(); zip.file("file.txt", "/site.net/files/file.txt"); Update I am following this example: I attempted the code provided but it was unsuccessful. I do ...

What is the process for changing the state of an array in graphql?

Currently, I am facing a challenge with adding an array to a GraphQl schema. Here is what it looks like: type Play { winRatio: [Float] } The intention behind the winRatio attribute is to store the history of all win ratios. For instance, after playing 3 ...

Unexpected behavior with animation duration in Safari

We have a project in the works that involves CSS animation. Our goal is to update the animation duration using JavaScript. Although this change is effective in most browsers, it seems to have trouble with Safari and iOS. Below is the code we are using to ...

Tips for locating the ID of an array element based on the text or value of the element

I am trying to identify the span id of elements in an array based on their values. For instance, if the value in the array is "Yellow", I need to determine that the corresponding span's id is "test4". However, I am struggling to figure out how to extr ...

Adjust the color of a selected edge in Three.js

let cubeEdges = new THREE.EdgesHelper(cube, 0xff0000); cubeEdges.material.linewidth = 5; scene.add(cubeEdges); A cube has been created using the following code: new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200, 1, 1, 1, materials), new THREE.MeshFaceMa ...

Creating a donut chart sparkline in React using Highcharts - a step-by-step guide

I am looking to create a donut sparkline chart in my React application using Highcharts. Can anyone guide me on how to achieve this functionality within React? My goal is to generate a visualization like the following, illustrating the percentage of a cer ...

Tips for maintaining the original value of a state variable on a child page in ReactJS. Keeping the initial value passed as props from the parent page

Whenever the 'isChildOpen' flag in the parent is true, my child page opens. The goal now is to ensure that the state variable filtered2 in the child component remains constant. While both filtered and filtered2 should initially receive the same v ...

How can I position text in the top right corner of a v-card's v-img component in Vuetify.js?

I am using Vuetify.js and I am trying to show a single word on the right side of an image within a v-card: <v-card> <v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75"> <span class= ...

Executing a JavaScript function when an element is clicked using inline

Is it possible to write the code below in a single line? <a href="#" onClick="function(){ //do something; return false;};return false;"></a> As an alternative to: <a href="#" onClick="doSomething(); return false;"></a> functio ...

In version 7.x of Elasticsearch.NET (NEST), I am encountering issues with deserializing my POCO JSON data

There is a noted breaking change in the internal Utf8 JSON serializer for Elasticsearch 7.x for .NET, as detailed here. Instead of resorting to Newtonsoft's Json.NET serializer, I am currently working on identifying the specific part of my JSON that ...

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

My goal is to insert a <div id="all_content"> element into the <sector id="all_field"> element using Javascript <section id="all_field"></section> <div id="all_content"> <h1>---&nbsp;&nbsp;Meeting Room Booki ...

"Utilizing VueJS XHR functionality within a versatile and reusable component

Seeking advice on best practices for improving the following scenario: I have a single global reusable component called <MainMenu>. Within this component, I am making an XHR request to fetch menu items. If I place <MainMenu> in both the heade ...

How come certain rectangles vanish when one rectangle completely fills the space?

Currently, I am encountering an issue with CSS paint worklet and I am trying to determine if it's a browser bug or an error on my end. In the worklet, I am drawing multiple rectangles. Strangely, when one rectangle covers the entire area, the others s ...

Tips for synchronizing the indexes of two arrays using a common value in JavaScript

Is there a way to sort one array to match the order of another array with identical content, based on a shared property? For instance: let firstArray = [{id: 123, ...}, {id: 456, ...}, {id: 789, ...}] // always in this order let secondArray = [{id: 456, . ...

Generate a Vue Component in real-time with a click of a button

My task involves populating a list of orders using the orders array. Each order has an edit functionality that triggers a vuetify dialog box component when clicked, displaying default data for editing. Here's my current approach: <tbody class=" ...

Tab buttons that switch between different sections with just a click

Forgive me if this seems like a simple coding issue, but I struggle with javascript and need some guidance... I have a setup where two buttons (blue and yellow) toggle between different content divs. On another part of the page, there are also two buttons ...

No results found in MongoDB query when using find method

Having an issue with an API call to my express server to retrieve employees working in the same location based on the location ID. Strangely, the API call returns an empty array while it functions correctly in the command-line interface. Definition of Emp ...

Working with AngularJS: Utilizing the Ng-repeat directive for iterating

I am struggling to figure out why the following code is not functioning properly. <div ng-repeat="r in reservations" ng-init="new = r.some_code"> <div ng-if="old == new"> <p ng-init="sum = sum + r.cost">{{r.name}} - {{r.cost}}</p&g ...