Как сохранить объект и его функции в строку?

Question

Есть задача:

Сохранить вот такой объект темы MUI5 на бэкенде

components: {
      MuiButton: {
        styleOverrides: {
          root: ({
                   ownerState,
                   theme
                 }) => ({
            borderRadius: theme.shape.borderRadius[0],
          }),
        },
        variants: [{
          props: {
            variant: 'contained'
          },
          style: ({
                    ownerState,
                    theme
                  }) => ({
            boxShadow: theme.shadows[1],
          }),
        }, {
          props: {
            color: 'success',
            variant: 'contained'
          },
          style: ({
                    ownerState,
                    theme
                  }) => ({
            boxShadow: 'rgb(84 214 44 / 24%) 0px 8px 16px 0px',
          }),
        }]
      }
     }

Это нужно для того, чтоб редактировать и подгружать тему с сервера, но я совершенно не понимаю как сохранить это все в таком виде вместе с методами и тд. чтоб потом в такой же вид и развернуть. JSON.stringify пробовал, он не дает мне сохранить методы объектов

Answer 1

Я не очень понял как вы эти же ф-ии потом запускать будете при получении их обратно, но в целом если есть острая необходимость, то у любой функции есть метод toString(), который позволяет получить функцию в виде строки

Я просто рекурсивно прошолся по всему объекту и всё что было функцией превратил в строку ну и в конце применил JSON.stringify, чтобы всё было в нужном формате

const components = {
    MuiButton: {
        styleOverrides: {
            root: ({
                ownerState,
                theme
            }) => ({
                borderRadius: theme.shape.borderRadius[0],
            }),
        },
        variants: [{
            props: {
                variant: 'contained'
            },
            style: ({
                ownerState,
                theme
            }) => ({
                boxShadow: theme.shadows[1],
            }),
        }, {
            props: {
                color: 'success',
                variant: 'contained'
            },
            style: ({
                ownerState,
                theme
            }) => ({
                boxShadow: 'rgb(84 214 44 / 24%) 0px 8px 16px 0px',
            }),
        }]
    }
}

const copyObjAsString = (obj) => {
    const objCopy = {...obj};
    
    const convertObjToString = (obj) => {
        for (const key in obj) {
            let value = obj[key];
            
            if (Array.isArray(value)) {
                for (const el of value) {
                    convertObjToString(value)
                }
            } else if (typeof value === 'function') {
                obj[key] = value.toString()
            } else if (typeof value === 'object') {
                convertObjToString(value)
            }
        }       
    }
    
    convertObjToString(objCopy);
    
    console.log(objCopy);
    
    return JSON.stringify(objCopy);
}

const componentsCopy = copyObjAsString(components);

console.log(componentsCopy);

БЛОГ НА HUSL

Как сохранить объект и его функции в строку?

Ответы (1 шт):