A guide on processing text line by line within a textarea and transforming it into JSON using AngularJS

Question

A guide on processing text line by line within a textarea and transforming it into JSON using AngularJS

Here is a textarea containing values in a specific format:

param01 : value01
param02 : value02

This is the code I have tried:

<div class="col-xs-4 input-container">
  <textarea id="gateway-params" ng-disabled="!edit">{{gatewayParams}}</textarea>
</div>

JavaScript function:

$scope.save = function() {
   for (var i = 0; $scope.gatewayParams; i++) {
      console.log(params[i]);
   }
 }

My goal is to read each line from the textarea and create a Javascript object based on it.

Best regards!

javascript angularjs json

Answer 1

Answer №1

// Please refrain from adding empty key/value pairs.

Check out this plunkr example: http://plnkr.co/edit/Zea3zZqaagDdO4s8pZRC?p=preview

On the controller side:

$scope.text = 'param01 : value01\nparam02 : value02\nparam03 : value03\nparam04 : value04\nparam05 : value05\nparam06 : value06\n';    

$scope.actionme = function(){   
    var lines = $scope.text.split("\n");// separating lines
    var datas ={}; 
    for(var i in lines){
      var line = lines[i].split(":"); // extracting key / value pairs
      // include only if key and value are not empty
      if((line.length ==2)&&(line[0].trim()!="")&&(line[1].trim()!="")){
        datas[line[0].trim()]  = line[1].trim();
      }
    }
    console.log(JSON.stringify(datas));
}

HTML View:

<div ng-controller="Ctrl">
   <textarea ng-model="text"> 
   </textarea>

  <button ng-click="actionme()">click</button>

</div>

Answer 2

// Please refrain from adding empty key/value pairs.

Check out this plunkr example: http://plnkr.co/edit/Zea3zZqaagDdO4s8pZRC?p=preview

On the controller side:

$scope.text = 'param01 : value01\nparam02 : value02\nparam03 : value03\nparam04 : value04\nparam05 : value05\nparam06 : value06\n';    

$scope.actionme = function(){   
    var lines = $scope.text.split("\n");// separating lines
    var datas ={}; 
    for(var i in lines){
      var line = lines[i].split(":"); // extracting key / value pairs
      // include only if key and value are not empty
      if((line.length ==2)&&(line[0].trim()!="")&&(line[1].trim()!="")){
        datas[line[0].trim()]  = line[1].trim();
      }
    }
    console.log(JSON.stringify(datas));
}

HTML View:

<div ng-controller="Ctrl">
   <textarea ng-model="text"> 
   </textarea>

  <button ng-click="actionme()">click</button>

</div>

Answer 3

Answer №2

By utilizing ng-model within your textarea, you have the ability to capture the content as a string and then parse it within your controller or directive.

To accomplish this, you can use

.split('\n');

This will allow you to split your string into an array of strings by new lines. As for the parsing process, I'll leave that part up to you. However, here is how you can structure your object:

var property = "example01";
var value = "output01";
var obj = {};
obj[property] = value;

Answer 4

By utilizing ng-model within your textarea, you have the ability to capture the content as a string and then parse it within your controller or directive.

To accomplish this, you can use

.split('\n');

This will allow you to split your string into an array of strings by new lines. As for the parsing process, I'll leave that part up to you. However, here is how you can structure your object:

var property = "example01";
var value = "output01";
var obj = {};
obj[property] = value;

A guide on processing text line by line within a textarea and transforming it into JSON using AngularJS

Answer №1

Answer №2

Similar questions

Enlarging the current division while reducing the size of the others when hovering

Avoiding the addition of identical objects in the array

Steps for running example of JavaScript colormap:

Tips for incorporating a new item into ng-repeat at a specific position in the array?

The v-select menu in Vuetify conceals the text-field input

Suggestions for rendering this JSON format

How to utilize jQuery to eliminate HTML onchange code

convert a screenplay to javascript

Unable to display any posts in my React application, no content is being produced

Encountering an issue with core.js:15723 showing ERROR TypeError: Unable to access property 'toLowerCase' of an undefined value while using Angular 7

Refresh the webpage content by making multiple Ajax requests that rely on the responses from the previous requests

Pressing a button to alter the text color

Angular 2 ensures that all of the columns receive updates

Images in HTML that continuously refresh themselves

Hiding links in javascript

What is the process for integrating a factory into a controller?

What are the steps to caching a message using discord.js?

Mixing various templates into a single outlet in ember.js

What is the best way to create a gradual color change in each individual cell instead of changing all at once?

Displaying extensive JSON data sets leads to browser freezing, crashing, or becoming unresponsive