já olhei vários exemplos na NET mas não estou conseguindo resolver essa situação. Agradeço se alguém puder ajudar.
Eu preciso converter uma string em um Array com elementos, eu vou receber essa string de um banco de dados e com base nela preciso montar o Array.
Quando eu carrego o Array com valores fixos ele monta direitinho o que eu preciso como pode ser visto no print do Debug abaixo, é exatamente dessa forma que eu preciso.
Mas quando eu monto usando os valores (string) que peguei do Banco não está montando da mesma forma do exemplo da figura acima.
Eu montei um exemplo no https://codepen.io/egameiro/pen/JqqPxW para poder testar.
Segue o código completo que estou usando.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const circles = [{
id: '1',
x: 40,
y: 40,
radius: 5,
color: 'rgb(255,0,0)'
}, {
id: '2',
x: 100,
y: 70,
radius: 5,
color: 'rgb(0,0,255)'
}, {
id: '3',
x: 160,
y: 100,
radius: 5,
color: 'rgb(0,255,0)'
}];
circles.forEach(circle => {
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = circle.color;
ctx.fill();
});
var bb = document.getElementById("LinhaPontos").value
const circles2 = [bb];
var aa = 0;
const novaArray = circles2.map(Object.values);
var bb = 0;
<div>
<input type="text" id="LinhaPontos" class="btn btn-info " size="40" value="{id: '1', x: 40, y: 40, radius: 5, color: 'rgb(255,0,0)'}" />
</div>
<canvas id="canvas" width="650" height="650" style="border: 1px solid black"></canvas>
circles2.map(circle => Object.values(JSON.parse(circle)))
?value
era para 1 ponto ? e os outros ? Para o formato que está a inserir o ideal é interpretar como JSON.