What is the best way to change JSON into a key-value dictionary with TypeScript?

Question

What is the best way to change JSON into a key-value dictionary with TypeScript?

Here is a JSON example that I am working with:

{
    "MyTest:": [{
            "main": {
                "name": "Hello"
            },
            "test2": {
                "test3": {
                    "test4": "World"
                },
                "test5": 5
            }
        },
        {
            "main": {
                "name": "Hola"
            },
            "test6": [{
                    "name": "one"
                },
                {
                    "name": "two"
                }
            ]
        }
    ]
}

My goal is to convert it into an array of arrays with key-value pairs.

[[main.name: "Hello", test2.test3.test4: "World", test2.test5: 5] , 
[main.name = "Hola", test6.name: "one", test6.name: "two"] ];

I am looking for a function like "is leaf" that can help me identify the values in the JSON structure.

If you have any advice on how to iterate deeply through this data, please share as it would be greatly appreciated.

javascript json typescript loops lodash

Answer 1

Answer №1

The function flattenObject() is designed to transform a nested object into a flat one, where keys are constructed by joining all sub-keys. This recursive function first checks if the current value is an object. If it is, it uses _.flatMap() to iterate through each property and call itself recursively with the collected keys so far. On the other hand, if the value is not an object, it simply returns an object with a single property containing the joined keys and the value.

After iterating through the object and collecting { key: value } objects, the final step involves merging these objects into a single flat object.

const flattenObject = val => {
  const inner = (val, keys = []) => 
    _.isObject(val) ? // check if it's an object or array
      _.flatMap(val, (v, k) => inner(v, [...keys, k])) // iterate and call fn with value and collected keys
      :
      { [keys.join('.')]: val } // return joined keys with value
      
  return _.merge({}, ...inner(val))
}

const obj = {"MyTest":[{"main":{"name":"Hello"},"test2":{"test3":{"test4":"World"},"test5":5}},{"main":{"name":"Hola"},"test6":[{"name":"one"},{"name":"two"}]}]}

const result = obj.MyTest.map(flattenObject)

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

Answer 2

The function flattenObject() is designed to transform a nested object into a flat one, where keys are constructed by joining all sub-keys. This recursive function first checks if the current value is an object. If it is, it uses _.flatMap() to iterate through each property and call itself recursively with the collected keys so far. On the other hand, if the value is not an object, it simply returns an object with a single property containing the joined keys and the value.

After iterating through the object and collecting { key: value } objects, the final step involves merging these objects into a single flat object.

const flattenObject = val => {
  const inner = (val, keys = []) => 
    _.isObject(val) ? // check if it's an object or array
      _.flatMap(val, (v, k) => inner(v, [...keys, k])) // iterate and call fn with value and collected keys
      :
      { [keys.join('.')]: val } // return joined keys with value
      
  return _.merge({}, ...inner(val))
}

const obj = {"MyTest":[{"main":{"name":"Hello"},"test2":{"test3":{"test4":"World"},"test5":5}},{"main":{"name":"Hola"},"test6":[{"name":"one"},{"name":"two"}]}]}

const result = obj.MyTest.map(flattenObject)

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

What is the best way to change JSON into a key-value dictionary with TypeScript?

Answer №1

Similar questions

Steps for populating a ListView with JSON data

"Utilizing Angular's ng-repeat to house multiple select dropdown

Issue with jqGrid not showing JSON data received from Java application

Ways to retrieve the body in a REQUEST using node.js

React modules imported in ES6 not functioning as anticipated

"Trouble with import aliases in a create-react-app project using craco: How to fix it

React Native - Caution: It is important for every child in a list to have a distinct "key" prop assigned to it

Remove the JSON object by comparing IDs between two JSON objects in JavaScript or Node.js, deleting it if the ID is not found

Using jQuery's slideToggle feature to hide content when clicked again or when a different button is

Guide on updating the form structure with ajax

When jQuery fails to detach() due to the presence of an input tag

The "void" type cannot be assigned to the type "ObservableInput<{}>"

Implement a loading bar on the entire page in Vue.js while a request is being made

Sending CoreData data as JSON to the Server

How to Fetch Data Using jQuery AJAX in PHP Without Page Refresh

Older versions of Android, specifically Android 7 or lower, seem to encounter issues with Apis in React Native when utilizing axios. Fortunately, this problem doesn

How to ensure a table in MaterialUI always maintains full width without requiring horizontal scrolling in CSS?

Is there a concept in JavaScript that includes a data structure called a "matrix" with elements arranged in a grid-like format accessed by

The functionality of cropping is not supported within a Bootstrap modal

Unable to retrieve JSON data on Android smartphones