How to convert space delimited multiple lines string to json with Javascript?

Question

I am working on a web application where users can copy their excel data (multiple rows with 2 columns) onto a website's text area. When clicking submit button on the same page, it will covert the excel data to JSON, displays the JSON in a different text area on the same web page.

I already got a HTML page going, just not certain how to write the convert code. (Code below)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset = "utf-8" />

      <title>Convert</title>
    </head>
    <body>
      <h1>Convert Table Data (2 Columns) To JSON</h1>

      <button onclick="convert()">Convert to JSON</button>
      <br><br>

      <textarea id="inputText" rows="50" cols="100"></textarea>
      <textarea id="outputText" rows="50" cols="100" readonly></textarea>

      <script>
        var textarea = document.getElementById("inputText");
        var textarea2 = document.getElementById("outputText");
        function convert() {
           // textarea2.value = textarea.value.convertToJSON......
        }
      </script>
    </body>
    </html>

Here is what the excel data will look like when copied and pasted into a text area:

Amy apples
Betty oranges
Cathy watermelon
Daisy bananas
Edward pears
Fiona grapes

Expected results to be displayed on different text area after submit:

{
 "Amy" : "apples",
 "Betty" : "oranges",
 "Cathy" : "watermelon",
 "Daisy" : "bananas",
 "Edward" : "pears",
 "Fiona" : "grapes"
}

Ori Drori · Accepted Answer · 2019-10-22 21:16:34Z

2

You can trim the string, then split it by \n to an array of strings, map the array and split the items by space. Now you can convert the array of arrays to an object with Object.fromEntries():

const str = `Amy apples
Betty oranges
Cathy watermelon
Daisy bananas
Edward pears
Fiona grapes`

const result = Object.fromEntries(str.trim().split('\n').map(s => s.split(' ')))

console.log(result)

answered Oct 22, 2019 at 21:16

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

weegee Over a year ago

Nice approach! Why did you use trim? Won't the string have no spaces then ?

Ori Drori Over a year ago

It won't have redundant spaces before or after the text, that will create "": "" properties. The spaces inside would be preserved.

History-Economy Over a year ago

Thank you so much, I just tried this solution, and it worked great.

weegee · Accepted Answer · 2019-10-22 21:26:46Z

How about splitting the string and then forEach over the array while putting the keys + values in an object?

// your textarea
let textarea = document.querySelector("textarea")
// the value of textarea
let value = textarea.value
// split the string from line breaks, so you have arrays of strings seperated from line breaks
let keys = value.split("\n")
// create an object to store the value on
let obj = {}
keys.forEach((val,index) => { // foreach the array
  let splitString = val.split(" ") // split the "Amy apples" into [Amy,apples]
  splitString[1] ? obj[splitString[0]] = splitString[1] : ""
})
//return and log them
console.log(obj)

<textarea>
Amy apples
Betty oranges
Cathy watermelon
Daisy bananas
Edward pears
Fiona grapes
</textarea>

Kamil Kiełczewski · Accepted Answer · 2019-10-23 11:26:10Z

-1

Try

function convert() {
  let r= inputText.value.replace(/(\w+) (\w+)/g,'  "$1" : "$2",');
         
  outputText.value =  `{\n${r.slice(0, -1)}\n}`
}

<button onclick="convert()">Convert to JSON</button><br>
<textarea id="inputText" rows="10" cols="30">
Amy apples
Betty oranges
Cathy watermelon
Daisy bananas
Edward pears
Fiona grapes</textarea>
<textarea id="outputText" rows="10" cols="30" readonly></textarea>

edited Oct 23, 2019 at 11:26

answered Oct 22, 2019 at 21:29

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

1 Comment

History-Economy Over a year ago

Thank you, just tried this solution and it also worked.

Collectives™ on Stack Overflow

How to convert space delimited multiple lines string to json with Javascript?

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related