Uncaught TypeError: Cannot assign to read only property 'type' of object '#<Object>'

Diagram
#1

Hi,

When I use diagram editor, I use our api result to make the parse data like below:

data = [
{
  id: 'a_1',
  x: 50,
  y: 50,
  type: 'plugImg',
  name: 'test',
  img: '/api/media/cable_type/image90.png/',
  width: 200,
  height: 107.29783037475345,
},
{
  id: 'a_2',
  x: 50,
  y: 167.29783037475346,
  type: 'plugImg',
  name: 'test',
  img: '/api/media/cable_type/image79.png/',
  width: 200,
  height: 71.03274559193954,
}]

I use addShape to create
diagram?.diagram.addShape(‘plugImg’, {
template: (config) => (
<section style="background-color: #dfdfdf;"> <img src='${config.img}' style="width:180px; height:auto;"/> </section>
),
});

I’m sure that the addShape can use, cause I use const data to parse will be OK.
But when I use api data, it will make error, is there anything wrong?

thanks!

#2

If I use this, it will active

diagram.parse(JSON.parse(JSON.stringify(data)))

but maybe there is something wrong…??

#3

According to the docs:

the template config should be a string.
Please, try to wrap your template html in quotes:

diagram?.diagram.addShape(‘plugImg’, {
template: (config) => (
'<section style="background-color: #dfdfdf;"> <img src="${config.img}" style="width:180px; height:auto;"/> </section>'
),
});

https://snippet.dhtmlx.com/o8p1ipi7