Combine an array of objects that are dynamically created into a single object

Having trouble transforming the JSON below into the desired JSON format using JavaScript.

Current JSON:

{
  "furniture": {
    "matter": [
      {
        "matter1": "Matter 1 value"
      },
      {
        "matter2": "Matter 2 value"
      },
      {
        "matter3": "Matter 3 value"
      }
    ],
    "suspense": [
      {
        "suspense1": "suspense 1 value"
      },
      {
        "suspense2": "suspense 2 value"
      }
    ],
    "Direct": [
      {
        "System": "System value"
      }
    ],
    "Road": [
      {
        "Road key 1 ": "Road value "
      }
    ]
  }
}

Expected JSON:

{
  "furniture": {
    "matter": {
      "matter1": "Matter 1 value",
      "matter2": "Matter 2 value",
      "matter3": "Matter 3 value"
    },
    "suspense": {
      "suspense1": "suspense 1 value",
      "suspense2": "suspense 2 value"
    },
    "Direct": {
      "System": "System value"
    },
    "Road": {
      "Road key 1 ": "Road value "
    }
  }
}

Note: The "furniture" key is static in the code above. All other keys and values are dynamically generated.

javascriptjsonangulartypescriptobject

Answer №1

If you're searching for arrays, consider constructing a combined object or flattening the nested levels.

const
    process = obj => Object.fromEntries(Object
        .entries(obj)
        .map(([key, value]) => [key, Array.isArray(value)
            ? Object.assign({}, ...value)
            : value && typeof value === 'object' ? process(value) : value
        ])),
    data = { furniture: { elements: [{ element1: "Element 1 value" }, { element2: "Element 2 value" }, { element3: "Element 3 value" }], mystery: [{ mystery1: "Mystery 1 value" }, { mystery2: "Mystery 2 value" }], Direct: [{ Channel: "Channel value" }], Path: [{ "Path key 1 ": "Path value " }] }, Variety: { "Steering System": "Hydraulic" } },
    finalResult = process(data);

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

Answer №2

Give this a shot

let items = {};
for (const key in jsonData.items) {
  let newObject = {};
  jsonData.items[key].forEach((item) => {
    for (const prop in item) {
      newObject[prop] = item[prop];
    }
    items[key] = newObject;
  });
}

let updatedData = { items: items };

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

Getting and passing data from a frontend form to Java, then displaying it back in the frontend through Angular

The successful implementation of a payment verification SOAP XML API in JAVA has been achieved. Through the use of JAVA code, XML requests are sent to a payment API with SOAPAction headers and Body, resulting in a response from the API. Now, the goal is t ...

javaangularxmlsoapfrontend

AngularJS directive facing a callback problem

Having trouble with callbacks while calling a service function This is the function defined in registrationService function checkUserAccess(incentiveLevel, callback, displayRegistrationView) { var url = "..."; httpWrapperService. ...

javascriptangularjscallback

The addition of an asynchronous call caused Array.map to start experiencing errors

I am working on a React component that iterates through an array of messages and renders JSX based on certain conditions: messages.map(async (msg) => { let previewImage: URL | undefined = undefined; if (msg.mediaId) { previewImage = await stora ...

javascriptreactjsnext.jsasync-awaitarray-map

Issue with Angular9-MatDatePicker: Unable to establish a connection with 'ngModel' as it is not recognized as a valid attribute of 'input'

Despite my efforts to implement ngmodel binding with matdatepicker, I am still encountering issues, even after reviewing multiple other posts on the topic. Here is a snippet of my HTML: <mat-form-field> <mat-label>Start Date</mat-label ...

htmlangulartypescriptangular-material

Can you explain the role of the faceVertexUV array within the three.js Geometry class?

Currently, I am utilizing three.js to create curved shapes using parametric functions. Within the THREE.js javascript file, there is a function called THREE.ParametricGeometry that continuously adds 2D vectors to the faceVertexUvs array. I am curious abo ...

javascriptthree.jsuv-mapping

Issues with loading an external CSS file in an HTML document

I've been attempting to implement a loading animation using jQuery, but I'm encountering issues with loading the CSS file. I have tried various paths for the css file such as: <link href="css/animation.css" type="text/css" rel="stylesheet"> ...

javascripthtmlcsshrefexternal

Retrieve a specific line of code from a snippet of JavaScript

I am looking to extract a specific line of code from a script that I am receiving via ajax... The line in question is new Date(2010, 10 - 1, 31, 23, 59, 59) found within the following snippet: jQuery(function () { jQuery('#dealCountdown').count ...

javascriptjquery

What is the best way to implement persistStore in Redux-Toolkit?

Here is my setup: import AsyncStorage from '@react-native-async-storage/async-storage' import { persistStore, persistReducer } from 'redux-persist'; import { configureStore } from "@reduxjs/toolkit"; import { searchReducer } f ...

reactjstypescriptreduxredux-toolkitredux-persist

Adal TypeScript Document

Recently, I've been experimenting with the TypeScript version of adal.js. As part of my setup process, I'm referring to this link to install adal.ts. However, after executing the command: npm install adal-typescript --save a new "node_modules" ...

typescriptadal

Steps for navigating to a different page by clicking on a gridview row

Currently, I am utilizing a grid view on my webpage. My specific request is that upon clicking on any row within the grid, it should redirect to a separate page where all the details of the selected row will be displayed. Appreciate your assistance! ...

javascriptc#jquerysqlasp.net

Modifying the content of JSON key values

In my application, I am using MongoDB, Express, and MongoDB. When receiving data on the server side, it comes in the form of an array of objects (JSON) named upProbations. For example, let's say I find information about Max: [ { Name ...

javascriptnode.jsarraysjsonmongodb

Encountered a problem while attempting to build with ng build --prod. No issues when using ng serve or excluding

My project was working smoothly with ng build --prod until I decided to update the TypeScript version from 2.72 to 2.92 in my package.json file. Now, after the update, an error message pops up: ERROR in Cannot read property 'Symbol(Symbol.iterator ...

node.jsangularnpmdeploymentng-build

One important rule to remember when using React Hooks is that they must be called consistently and in the correct order in each render of the component. It

Encountering an issue while trying to use the ternary operator to determine which React Hook to utilize. The error message states: "React Hook "useIsolationDynamicPhase" is called conditionally. React Hooks must be invoked in the same order during every co ...

javascriptreactjstypescriptwebweb-frontend

The second parameter of the Ajax request is not defined

Having an issue with my Ajax request in Vue.js where the second parameter is logging as undefined in the console. I've been trying to fix this problem but haven't found a solution yet. This is the code snippet for $.ajax(): //$.ajax() to add ag ...

javascriptjqueryajaxvue.js

Struggling to merge two variables together and receiving this error message: "mergedObject is not defined."

New to Node.js/Express and trying to combine two objects to save them to a collection. Any advice would be greatly appreciated! Thank you in advance for your time. This is what I've put together, but it's not functioning as expected: app.post( ...

javascriptnode.jsexpress

Can't I prevent additional renders using useMemo()?

I am facing an issue with my function-based component that fetches data using redux toolkit and useAppSelector(). I have placed a console.log within the component to monitor its behavior. However, upon refreshing the page, the console.log continues to appe ...

javascriptreactjsreact-hooks

Click to stay in the background

I am currently facing an issue where opening a new tab on click redirects the focus to the child window instead of staying in the current window. I would like the popup to open without blocking and allowing me to maintain focus on my current window. The c ...

javascriptonclick

Please enter a numerical value into the input field in a JavaScript form

<script> function loop() { var input = document.getElementById('inputId').value; for (var i = 0; i < input; i++) { var result = document.getElementById('outputDiv').innerHTML ...

javascript

Is the custom attribute event being triggered too soon?

My Unique Component Creation Journey I have meticulously crafted a custom component to enhance the navigation of my application. The core structure consists of an ul element, with each li item dynamically generated based on the contents of the router&apo ...

javascriptaurelia

Adjusting the array of buttons with various functions within the Header component

I am looking to create a customizable Header component with different sets of buttons that trigger various functions. For example, on the home page, the buttons could be "visit about page" and "trigger vuex action A", while on the about page they could be ...

javascriptvue.jsvue-componentvuexvue-router