Transforming JSON to function with react-jsonschema-form

Question

Transforming JSON to function with react-jsonschema-form

Starting off with react-jsonschema-form, I've encountered the need for input in a specific format. Unfortunately, dealing with nested JSON data has proven to be challenging when trying to recursively transform it into the required format.

The initial JSON structure is as follows:

{
  "Coordinates": {
    "X-Coordinate": 47,
    "Y-Coordinate": -122
  },
  "Coordination Type": {
    "Cartesion Mode": false,
    "Starting Range": {
      "Start": 8000,
      "End": 9000
    }
  },
  "Map": {
    "Offline Map": false,
    "URL": "http://localhost:9000"
  }
}

Here is the desired recursive transformation of the JSON data:

{
   "Coordinates": {
    "type": "object",
    "title": "Coordinates",
    "properties": {
      "X-Coordinate": {
        "type": "number",
        "title": "X-Coordinate",
        "default": 47
      },
      "Y-Coordinate": {
        "type": "number",
        "title": "Y-Coordinate",
        "default": -122
      }
    }
  },
  "Coordination Type": {
    "type": "object",
    "title": "Coordination Type",
    "properties": {
      "Cartesion Mode": {
        "type": "boolean",
        "title": "Cartesion Mode",
        "default": false
      },
      "Starting Range": {
        "type": "object",
        "title": "Starting Range",
        "properties": {
          "Start": {
            "type": "number",
            "title": "Start",
            "default": 8000
          },
          "End": {
            "type": "number",
            "title": "End",
            "default": 9000
          }
        }
      }
    }
  },
  "Map": {
    "type": "object",
    "title": "Map",
    "properties": {
      "Offline Map": {
        "type": "boolean",
        "title": "Offline Map",
        "default": false
      },
      "URL": {
        "type": "string",
        "title": "URL",
        "default": "http://localhost:9000"
      }
    }
  }
}

Even though an iterative approach was initially successful, it lacks scalability. Hence, I've been struggling for hours to develop a recursive method for this transformation.

I would greatly appreciate guidance on implementing a recursive JavaScript function to adapt the given JSON data to the specified format.

javascript json object react-jsonschema-forms

Answer 1

Answer №1

Looks like this should do the trick. Please let me know if you notice anything I may have overlooked.

// input data copied from the initial inquiry
const userInput = {
  "Coordinates": {
    "X-Coordinate": 47,
    "Y-Coordinate": -122
  },
  "Coordination Type": {
    "Cartesion Mode": false,
    "Starting Range": {
      "Start": 8000,
      "End": 9000
    }
  },
  "Map": {
    "Offline Map": false,
    "URL": "http://localhost:9000"
  }
};

// function for recursively converting fields
const fieldConverter = (field, value) => (
  {
    type: typeof value, // possible values are 'object', 'boolean', 'number', 'string'
    title: field, // using the field name as the title (e.g. 'Starting Range')
    ...(
      typeof value !== 'object'
      ? { default: value } // primitive type; set default and end recursion
      : {  
        properties: Object.entries(value)
          .reduce((convertedValues, [subField, subValue]) => ({
            ...convertedValues, // retain previous iterations
            [subField]: { 
              ...fieldConverter(subField, subValue) // recursive call to handle nested objects
            }
          }), {})
      }
    )
  }
);

// starting point of conversion
const convertedOutput = Object.entries(userInput)
  .reduce((result, [key, value]) => ({
    ...result, // keep track of previous results
    [key]: {...fieldConverter(key, value)} // convert each property
  }), {}
);

// display the result
document.getElementById('output').innerText = (JSON.stringify(convertedOutput, null, 2))

<pre id="output" />

Answer 2

Looks like this should do the trick. Please let me know if you notice anything I may have overlooked.

// input data copied from the initial inquiry
const userInput = {
  "Coordinates": {
    "X-Coordinate": 47,
    "Y-Coordinate": -122
  },
  "Coordination Type": {
    "Cartesion Mode": false,
    "Starting Range": {
      "Start": 8000,
      "End": 9000
    }
  },
  "Map": {
    "Offline Map": false,
    "URL": "http://localhost:9000"
  }
};

// function for recursively converting fields
const fieldConverter = (field, value) => (
  {
    type: typeof value, // possible values are 'object', 'boolean', 'number', 'string'
    title: field, // using the field name as the title (e.g. 'Starting Range')
    ...(
      typeof value !== 'object'
      ? { default: value } // primitive type; set default and end recursion
      : {  
        properties: Object.entries(value)
          .reduce((convertedValues, [subField, subValue]) => ({
            ...convertedValues, // retain previous iterations
            [subField]: { 
              ...fieldConverter(subField, subValue) // recursive call to handle nested objects
            }
          }), {})
      }
    )
  }
);

// starting point of conversion
const convertedOutput = Object.entries(userInput)
  .reduce((result, [key, value]) => ({
    ...result, // keep track of previous results
    [key]: {...fieldConverter(key, value)} // convert each property
  }), {}
);

// display the result
document.getElementById('output').innerText = (JSON.stringify(convertedOutput, null, 2))

<pre id="output" />

Answer 3

Answer №2

Utilizing the JSON.parse reviver parameter enables transformation of values :

var jsonData = `{
  "Coordinates": {
    "X-Coordinate": 47,
    "Y-Coordinate": -122
  },
  "Coordination Type": {
    "Cartesion Mode": false,
    "Starting Range": {
      "Start": 8000,
      "End": 9000
    }
  },
  "Map": {
    "Offline Map": false,
    "URL": "http://localhost:9000"
  }
}`

var parsedObj = JSON.parse(jsonData, (key, value, type = typeof value) => !key ? value : 
  { type, title: key, [type === 'object' ? 'properties' : 'default']: value } )
  
console.log(parsedObj)

Answer 4

Utilizing the JSON.parse reviver parameter enables transformation of values :

var jsonData = `{
  "Coordinates": {
    "X-Coordinate": 47,
    "Y-Coordinate": -122
  },
  "Coordination Type": {
    "Cartesion Mode": false,
    "Starting Range": {
      "Start": 8000,
      "End": 9000
    }
  },
  "Map": {
    "Offline Map": false,
    "URL": "http://localhost:9000"
  }
}`

var parsedObj = JSON.parse(jsonData, (key, value, type = typeof value) => !key ? value : 
  { type, title: key, [type === 'object' ? 'properties' : 'default']: value } )
  
console.log(parsedObj)

Transforming JSON to function with react-jsonschema-form

Answer №1

Answer №2

Similar questions

Creating a dynamic jQuery method to apply validation rules to multiple fields

Get access to environment variables dynamically using parameters

What is the best way to deserialize JSON arrays and connect the extracted objects to WPF DataGrids?

What is the best way to assign a class to certain columns within a table?

Prevent user input in HTML

Making a surface-level copy of an array containing nested arrays

Using AJAX to submit a single form

The choice between using inline style objects with React or utilizing traditional CSS classes presents distinct advantages and

Creating multi-line tabs using Vuetify

Combining various postponed JavaScript file imports in the HTML header into a single group

Automatically hide a label after a certain amount of time following a button click

Update the value of the following element

"Uncaught ReferenceError: $ is not defined - $function()" error in JavaScript/jQuery

Converting an HTML menu to a WordPress menu: A step-by-step guide

Utilize the _sortBy function from the lodash library to arrange an array based on a specific field

Iterate through the JSON response once the AJAX call is successful

How can I show or hide a survey pop-up depending on the URL in the address bar?

`<picture> contains the main image``

Tips for dynamically updating an input within a shadow DOM using code?

Exploring the transparency of material lab autocomplete drop-down text for enabling multiple selections