how to get an object from a textarea value

Question

This is the value of a textarea:

STORY 01---abc
STORY 02---def
STORY 03---ghi

From the above I need an object:

{"STORY 01":"abc","STORY 02":"def","STORY 03":"ghi"}

My try - without success:

let obj = {};
let arr = $('#txa').val().split('\n');
for(el of arr){
  let a = el.split('---')[0];
  let b = el.split('---')[1];
  obj.a = b;
}

Result: a: "ghi"

Any help?

Answer 1

You need to use a string accessor

obj[a] = b

obj.a referes to the property 'a', obj[a] refers to the property with the key equal to the value of a

Answer 2

You were close, but instead of dot ( obj.a ) notation, you have to use bracket ( obj[a] ) notation to set the new object keys. Otherwise you are always updating the key a of the object.

Also, note there is no need to duplicate the split() call, you can do it once and get both values from the resulting array.

 let obj = {}; let arr = $('#myTArea').val().split('\\n'); for (el of arr) { let [a, b] = el.split('---'); obj[a] = b; } console.log(obj); console.log(obj["STORY 01"]); console.log(obj["STORY 02"]); console.log(obj["STORY 03"]); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="myTArea">STORY 01---abc STORY 02---def STORY 03---ghi</textarea> 

Answer 3

Explanation

Using destructuring , String#match and Array#reduce

.match(/(?!\\n).+/g) To get an array of each line.

For each line, split it with --- and update the accumolator ( a ) and return it.

.reduce((a,c)=>{
   const [key, value] = c.split("---");
   a[key]=value;
   return a;
 }, {});

Solution

 const data = ` STORY 01---abc STORY 02---def STORY 03---ghi `; const res = data.trim() .match(/(?!\\n).+/g) .reduce((a,c)=>{ const [key, value] = c.split("---"); a[key]=value; return a; }, {}); console.log(res); 

Recommendation

I would re-organize the final output differently since your key has a space. Also taking input directly from the textarea and using it as a key is prone to user input errors.

 const data = ` STORY 01---abc STORY 02---def STORY 03---ghi `; const res = data.trim() .match(/(?!\\n).+/g) .map(c=>{ const [key, value] = c.split("---"); return {key, value}; }); console.log(res); 

Answer 4

The key is in adding properties to the obj using the bracket notation

I used a different approach using String.prototype.substring and Array.prototype.forEach

 //vanilla solution - no jQuery const obj = {}; //use constant since the variable itself won't change const arr = document.querySelector("#myTArea").value.split('\\n'); //same here //since arr is the array containing the splitted values //we can use array's forEach arr.forEach(function(element){ const delimiter = element.indexOf("-"); const keyValue = element.substring(0, delimiter); const value = element.substring(delimiter+3); //delimiter is 3 long, so index+3 obj[keyValue] = value; }); console.log(obj); 

 <textarea id="myTArea">STORY 01---abc STORY 02---def STORY 03---ghi</textarea>