What is the best way to transform this JSON data into an array of key-value pairs in JavaScript?

Dealing with nested JSON data can be challenging, especially when trying to extract key-value pairs efficiently. If anyone has suggestions on how to simplify this process and improve readability, please share your insights.

The goal is to transform the nested JSON into an array of objects where each object represents a parent-child relationship. The tricky part is handling unknown levels of nesting without resorting to excessive looping. Is there a smarter way to achieve this?

Below is a sample of the complex JSON payload:

[{
  "id": {
    "no": null,
    "uid": null,
    "dataBody": {
      "area": "Universe",
      "place": "LMN",
      "information1": [{
        "code": "abc",
        "group": "xyz",
        "data": [{
            "definition": {
              "type": "up",
              "features": {
                "featurekey": "ABC",
                "featureValues": null
              },
              "mandatory": true
            },
            "cost": {
              "currency": "USD",
              "value": 1
            }
          },
          {
            "definition": {
              "type": "down",
              "mandatory": true
            },
            "cost": "100"
          },
          {
            "definition": {
              "type": "left",
              "value": null,
              "mandatory": true
            },
            "cost": false
          }
        ]
      }],
      "hobby": {
        "indoor": false,
        "outdoor": true
      },
      "petName": "Tiger"
    },
    "details": "detail",
    "phone": "contact"
  }
}]

Code snippet used for data manipulation:

Insert custom code here...

Expected output:

Insert expected output here...
javascriptarraysjsontypescript

Answer №1

You can achieve this by using recursion to list the items

[
  {
    "name": "data.0.id.no",
    "value": null
  },
  {
    "name": "data.0.id.uid",
    "value": null
  },
  {
    "name": "data.0.id.dataBody.area",
    "value": "Universe"
  },
  {
    "name": "data.0.id.dataBody.place",
    "value": "LMN"
  },
  {
    "name": "data.0.id.dataBody.information1.0.code",
    "value": "abc"
  },
  {
    "name": "data.0.id.dataBody.information1.0.group",
    "value": "xyz"
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.0.definition.type",
    "value": "up"
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.0.definition.features.featurekey",
    "value": "ABC"
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.0.definition.features.featureValues",
    "value": null
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.0.definition.mandatory",
    "value": true
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.0.cost.currency",
    "value": "USD"
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.0.cost.value",
    "value": 1
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.1.definition.type",
    "value": "down"
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.1.definition.mandatory",
    "value": true
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.1.cost",
    "value": "100"
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.2.definition.type",
    "value": "left"
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.2.definition.value",
    "value": null
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.2.definition.mandatory",
    "value": true
  },
  {
    "name": "data.0.id.dataBody.information1.0.data.2.cost",
    "value": false
  },
  {
    "name": "data.0.id.dataBody.hobby.indoor",
    "value": false
  },
  {
    "name": "data.0.id.dataBody.hobby.outdoor",
    "value": true
  },
  {
    "name": "data.0.id.dataBody.petName",
    "value": "Tiger"
  },
  {
    "name": "data.0.id.details",
    "value": "detail"
  },
  {
    "name": "data.0.id.phone",
    "value": "contact"
  }
]

This is the recursive function:

var output = Array();

function iterate(data, name, output)
{
    for(let key in data)
    {
        let value = data[key];

        if(value != null && (typeof(value) == "object" || typeof(value) == "array"))
        {
            iterate(value, name + "." + key, output);
        }
        else
        {
            output.push({name:name + "." + key, value:value});
        }
    }
}


iterate(data, "data", output);

console.log("Output", JSON.stringify(output, 0, 2));

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

Troubleshooting Datatables and ASP.net - The mysterious HTTP Error 404.15 that leaves you lost and

When making a request with datatables, I am encountering an issue with the URL being too long. The current URL is as follows: http://localhost:12527/MyHandler.ashx?draw=1&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bse ...

javascriptasp.netdatatables

When a JSON integer is given, it is automatically transformed into a string value

When I make a JSON request with an integer value, it is automatically converted to a string on the Java side where the accepting field is of type String. I am using the Jersey Jackson API for handling JSON. For example: JSON request: { "executable":1 ...

javajson

Troubleshooting a Custom Menu Control in HTML

Would you mind taking a look at the menu I have set up in this fiddle: http://jsfiddle.net/Gk_999/mtfhptwo/3 (function ($) { $.fn.menumaker = function (options) { var cssmenu = $(this), settings = $.extend({ title: "Menu", ...

javascripthtmlcssmenuhtml-lists

What leads to the inability to utilize environment variables in this TypeScript app built with Vue 3?

Currently, I am developing a single page application utilizing Vue 3 and TypeScript. The main purpose of this app is to interact with an API. All the necessary information including the API's URL and key are stored in the 'src\env.js' f ...

typescriptvue.jsvuejs3

Changing table data using a switch in mui-datatables when my information is stored as boolean values

How can I update my boolean data in a Switch component for each row fetched from Firestore? The data is currently being displayed correctly, but when I click on the Switch to change it from true to false or vice versa, nothing happens. Can someone help me ...

javascriptreactjsfirebasegoogle-cloud-firestore

Mastering the Art of Scrolling

Can someone please tell me the name of this specific scrolling technique? I am interested in using something similar for my project. Check out this example site ...

javascriptjquerycsshtml

Tool for controlling the layout of the viewport with Javascript

I have experience using ExtJS in the past to create dashboards, and one of my favorite features is the full-screen viewport with a border layout. This allows for easy splitting of a dashboard into panels on different sides without creating excessive scroll ...

javascriptjquerycssextjsextjs4

Streaming live video on the website

Hi there! I'm looking to integrate live video capturing into an HTML/JavaScript site for a presentation. However, I'm not sure where to start my search. Can anyone point me in the right direction? :) The live video will be captured by a camera o ...

javascripthtmllivebroadcast

Characteristics of events within the embed element

<div id='aplayer'></div> js $('#note').click(function() { $('#aplayer').html("<embed src=" + music + " onended='test();'" + ">"); }); function test(){ alert ('525'); } audio is ...

javascriptjqueryeventsembed

Using Selenium Webdrivers to Browse Pages with Minimal Resource Loading

I'm attempting to restrict Javascript from altering the source code of the site while testing with Selenium. Disabling Javascript completely in the Webdriver is not an option as I require it for testing purposes. Below is my approach for the Firefox W ...

javajavascriptseleniumselenium-webdriverwebdriver

Avoid losing focus on href="#" (preventing the page from scrolling back up to the top)

Is there a way to prevent an empty href link from causing the page to scroll up when clicked? For example, if I have: <a href="#">Hello world</a> And this "Hello world" link is in the middle of the page. When clicked, the URL would look like ...

javascriptjqueryhtmlcss

Typescript iterative declaration merging

My current project involves creating a redux-like library using TypeScript. Here is an example of the basic action structure: interface ActionBase { type: string; payload: any; } To customize actions for different types, I extend the base interface. ...

typescriptredux

There appears to be a malfunction in the socket rooms, as they are not operating

I have set up a code where sockets are being sent to the wrong person, and I am unable to figure out why. Whenever I update one user's status, it also updates the other user's status. Snippet of Code io.on('connection', function(socke ...

javascriptnode.jssocket.io

Incorporating additional text following the creation of an image composite using HTML5

I am facing an issue with positioning two images on a canvas using HTML5. Despite changing the x and y properties, the images remain stuck at the top left corner (0, 0). This is different from how I can position text easily on the canvas. <canvas width ...

javascripthtmlcanvashtml5-canvas

Significant delay in fetching model data for controller via XHR

My controller is designed to make an ajax call to retrieve its model, which is a 4.5k json containing a 2d array. This data is then used to create a combo displaying a series of labels in the html below: <select data-ng-controller="CGSimpleXHRComboCont ...

jqueryajaxjsonangularjs

Traveling within a layered object

Currently, I'm working with an object and iterating through it to retrieve outputs as shown below: var obj = { "first": { "Bob": { "1": "foo", "2": "bar" }, "Jim": { "1": "baz" } }, "second": { "Bob": { ...

javascriptobject

Move a Java application from a trial SAP HCP to a complete SAP HCP membership

After successfully creating a Java IoT App with Raspberry Pi running on SAP HANA HCP trial account, I am now looking to enhance its functionality within the SAP HANA Development Workbench. Is there a way to import it into the SAP HANA account with ease, o ...

javascriptjavahanasap-business-technology-platform

The removeClass method does not affect the class attribute when using $(this).attr('class'), but only when using $(this).attr('id')

I am currently facing an issue with reducing the size of my jQuery code. The main function is to validate a form - if empty, I want to add a class of 'highlight' or remove it using addClass('highlight') and removeClass('highlight&a ...

javascriptjqueryremoveclass

The Angular Router is continuing to show the HomeComponent upon navigation, rather than just displaying the ChildComponent

Lately, I've been diving into Angular and attempting to create a github search application using the github api. However, I've encountered some roadblocks with routing and data passing. My goal is for the user to land on a page like /user/userID ...

angulartypescriptangular-ui-router

The Select element in Next.js needs to have an accessible name - it must have a title attribute for improved accessibility

Just starting out with Next.js and Typescript. I'm in the process of rebuilding an app using Next.js, but I've hit a roadblock when trying to split pages and components. The error message that keeps popping up is "Select element must have an acce ...

reactjstypescriptnext.jscomponents