Issue #2367○ OpenOpened November 1, 2019by pouyamiralayi0 reactions

Objects in script interpolations

待解决问题

No community answers yet. Open the original discussion on GitHub to share your solution.

Question

Describe the bug (this is not happening in the latest version, this issue is not valid.)

assume that we have a property in our component model which is an object. then try to interpolate this property in script: what you will get is a [object Object] string.

Steps to reproduce the behavior

  1. create a custom component type.
  2. inside model, create a property like this: test:{a:1,b:2}
  3. inside model, create a script function.
  4. inside script function, create a variable like this: const test = '{[ test ]}'
  5. log the parsed value: console.log(JSON.parse(test))
  6. an error regarding JSON parsing will be shown.

Expected Behaviour: interpolation of an object property would gives us a JSON string that can be parsed in order to achieve the original object.

Code snippets: based on the operation in here we are using JSON.stringify for the array and object types. so as something like console.log(JSON.parse(JSON.stringify({a:1,b:2}))) is working, we expect the same results here. although we could overcome this scenario by using tagged templates but the way we are transforming script functions into strings, will override the original template literals behavior:

// -- this is not possible inside script --

function template(chunks, ...interpolations) {

  console.log(chunks);          // ['1 ', ' 3']
  console.log(interpolations);  // [2]
}

template`1 ${2} 3`;

cheers!

Answers (0)

No answers yet.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.