Transform String into Array of Elements

Asked

Viewed 130 times

1

I have looked at several examples on the NET but I am not able to solve this situation. I’d appreciate it if someone could help.

I need to convert a string into an Array with elements, I will receive this string from a database and based on it I need to mount the Array.

When I load the Array with fixed values it mounts exactly what I need as can be seen in the Debug print below, this is exactly how I need it.

inserir a descrição da imagem aqui

But when I mount using the values (string) I took from the Bank is not mounting in the same way as the example of the figure above.

He rides that way.. inserir a descrição da imagem aqui

I set an example in https://codepen.io/egameiro/pen/JqqPxW in order to test.

Follow the full code I’m using.

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>

javascript array string
  • 1

    And what would be the string?

  • Have you tried circles2.map(circle => Object.values(JSON.parse(circle))) ?

  • But the information that’s on value was for 1 point ? and the others ? For the format you are inserting the ideal is to interpret as JSON.

  • Hi Isac the information that is in value is for a point. I just put as example, but usually will have several points.

  • user140828.. tried and failed.

2 answers

3


I think you need two things:

First change the way you write the data, use the JSON form:

{"id": "1", "x": 40, "y": 40, "radius": 5, "color": "rgb(255,0,0)"}

attributes and string with double quotes ";

And then when retrieving this string, use the JSON.parse() to convert into an object;

Final result:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const circles = JSON.parse(document.getElementById("LinhaPontos").value);
    
  circles.forEach(circle => {
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = circle.color;
  ctx.fill();
});
<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)"},{"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)"}]'  />
</div>
<canvas id="canvas" width="650" height="650" style="border: 1px solid black"></canvas>

  • Thank you very much Jduwe was exactly what I needed.

0

How do you want the array ?

can try using split;

example:

var string = 'oi';

var array = string.split('');

or if you have a comma just use the comma in the split and it does an array of the string.

Browser other questions tagged javascript array string

You are not signed in. Login or sign up in order to post.