Change specific values of an array dynamically-CodePudding

I have a string like this inside a textarea with id #map_coords.

[id:1,x:288.43,y:260.15,url:#]-[id:2,x:396.43,y:310.15,url:#]-[id:3,x:503.43,y:299.15,url:#]-[id:4,x:642.43,y:191.15,url:#]

I assign the string to a variable: var getVals = jQuery('#map_coords').val();

I am converting the string to array: getVals = getVals.split("-");

So now the above string looks like this:

Array
0: [id:1,x:288.43,y:260.15,url:#]
1: [id:2,x:396.43,y:310.15,url:#]
2: [id:3,x:503.43,y:299.15,url:#]
3: [id:4,x:642.43,y:191.15,url:#]

Then, with a click of a button, I want to delete a value inside the array, let's say the 2nd one (1:). I do that with this:

getVals.splice((getMap - 1),1);

The getMap variable is always the same value as the id: inside the array. So if I need to delete the id:2 I will splice the 1 value (that's why I do getMap - 1 ).

After the deletion, the array looks like this:

Array
0: [id:1,x:288.43,y:260.15,url:#]
1: [id:3,x:503.43,y:299.15,url:#]
2: [id:4,x:642.43,y:191.15,url:#]

Which is good, but the problem is that now the 1: key, has an id:3 which is wrong. I want to change that to id:2. Same goes for the id:4 that needs to change to id:3 and so on for every key inside the array AFTER the id:2. And this id:2 is not static but dynamically changes depending on the getMap variable. To do this, I convert once again the key into another array. Like this:

var arrLength = getVals.length;
for (var i = (getMap - 1); i < arrLength; i  ) {
  var newVals = getVals[i].split(",");
}

The magic happens inside the for arguements, where I set the var i = (getMap - 1). This helps me do changes to the values that proceed the key I changed.

Now we get to split each key and the results for the are these:

0: [id:3
1: x:503.43
2: y:299.15
3: url:#]

and this:

0: [id:4
1: x:642.43
2: y:191.15
3: url:#]

Great! Now I can simply change only the [0] key and substract 1 from their values, making 3 into 2 and 4 into 3 and so on until the array ends. I do it like this:

var arrLength = getVals.length;
for (var i = (getMap - 1); i < arrLength; i  ) {
  var newVals = getVals[i].split(",");
  for (var x = 0; x < 1; x  ) {
    newVals = newVals[0].replace((i 2),(i 1));
  }
}

If I do console.log(newVals) I get the correct changed values:

[id:2
[id:3

Yes! It worked but... now, how do I put these new values back to the original getVals array? The final form that I need to get is this:

[id:1,x:288.43,y:260.15,url:#]-[id:2,x:503.43,y:299.15,url:#]-[id:3,x:642.43,y:191.15,url:#]

It's the same string you saw at the start of this post only that the id:2 key is now deleted and all the following keys have their id:'s substracted by 1.

Finally I will do: getVals.toString().replace( /],/g,']-'); which helps me add the - symbol in-between the arrays and convert the whole thing into a string again and pass it as a value inside the textarea where it came from!

So my only problem is how can I update the results of newVals inside my getVals array?

Thanks so much if you read all of this!

CodePudding user response：

I strongy suggest you paste JSON into the textarea

Here I do simple replacing to get a proper object - this is all unnecessary if you have a proper JSON string to begin with

let  str = document.querySelector("#t1").value;
// replace to make a proper JSON 
str = "[" str
  .replaceAll("#",'"#"}')
  .replaceAll("-",",")
  .replaceAll("x",'"x"')
  .replaceAll("y",'"y"')
  .replaceAll("id",'{"id"')
  .replaceAll("url",'"url"')
   "]"
let getVals = JSON.parse(str).flat()
document.querySelector("#t2").value = JSON.stringify(getVals)
const getMap = 3;
getVals.splice((getMap - 1),1);
getVals.forEach((item,i) => item.id=i 1)
document.querySelector("#t3").value = JSON.stringify(getVals)

This is what I read<br/>
<textarea id="t1" rows=5 cols=50>
[id:1,x:288.43,y:260.15,url:#]-[id:2,x:396.43,y:310.15,url:#]-[id:3,x:503.43,y:299.15,url:#]-[id:4,x:642.43,y:191.15,url:#]
</textarea>
<hr>
This is what I generate <br/>
<textarea id="t2" rows=5 cols=50>
</textarea>
<hr>
After deleting and renumbering<br/>
<textarea id="t3" rows=5 cols=50>
</textarea>