getJson()

The getJson() function was deprecated in v0.1.0; a loadData() function with functionality equivalent to getJson() will be provided in v0.1.1.

Until then, you can declare and use functional components as an alternative.

# A page with custom fetch function

This is a demo page with custom fetch function.

import { useState, useEffect } from 'react';

export const ComponentWithFetch = () => {
  const [data, setData] = useState(undefined);
  
  const execFetch = async () => {
  	const response = await fetch('https://api.example.com/v1/some_endopoint')
  	setData(response.data);
  }
  
  useEffect(() => {
  	execFetch();
  }, [])
  
  return (
  	<div>{ JSON.stringify(data) }</div>
  )
}

The getJson() function is one of Morph’s data retrieval functions; if the process specified by alias is SQL or a Python function that returns a DataFrame, you can retrieve the result in JSON format.

index.mdx

# Employee Data

export const employeeData = getJson({
  alias: 'employee_data_py'
});

## We have {value(employeeData).length} employees.

Return Value of getJson()

The return value of getJson() has the following structure

response

{
  "data": {
    "type": "json",
    "data": ...
  },
  "error": Error | undefined,
  "loading": boolean
}

data.data contains the results of executing Python functions and SQL files.

Displaying the return value of getJson()

The return value of getJson() is not a simple object, so you need to use the value() function to extract the value.

index.mdx

export const employeeData = getJson({
  alias: 'employee_data_py'
});

{ JSON.stringify(value(employeeData).data) }

The content enclosed in {} is evaluated as a JSX node and must be either a string, boolean, number, null, undefined, or React component. Here, we use JSON.stringify() to stringify

Using variables with getJson()

You can use variables with getJson() to pass parameters to SQL queries and Python functions.

index.mdx

export const depertment = variable();

<VariableInput variable={depertment} />

export const employeeData = getJson({
  alias: 'employee_data_py',
  variables: {
    department: depertment
  }
});

## We have {value(employeeData).length} employees in { value(department) } department