Подготовка текстовой области через запятую и строку для многомерного массива в js

Question

Я пытаюсь преобразовать что-то вроде этого:

firstnameA,lastnameA,emailA
firstnameB,lastnameB,emailB

в переменную js / jquery, которую я затем могу опубликовать в своем скрипте php, чтобы вставить строку за строкой в ​​таблицу.

Пока мне удалось это сделать: он разделяет ввод по новой строке, а затем по запятой, создает таблицу, чтобы пользователю было легко проверять ввод, и в parralel создает массив что я опубликую в своем сценарии для дальнейшего лечения . Вторая часть не работает вообще (сборка стола работает). Я просмотрел множество постов о том, как создавать многомерные массивы в js, но все они требуют, чтобы я знал точные размеры массива. Однако это может быть 1,2 или 50 строк.

Вот мой код:

(function($) {
  $(document).ready(function() {
    $('#new_coll').submit(function(e) {
      e.preventDefault();
	  if($("#names").val() != "") {
		  
		  var table = '<table class="table mt-4"><thead><th>First name</th><th>Last name</th><th>Email address</th></thead><tbody>';
		  var i = 0; 
		  var j = 0; 
		  var data;
		   
		  $.each($("#names").val().split(/\r?\n/), function(e, elements) {
			  table = table+'<tr>';
			  $.each(elements.split(","), function(e, element) {
				table = table+'<td>'+element+'</td>';
				data[i][j] = element;
				j++;
			  });
			  var j = 0;
			  table = table+'</tr>';
			  i++;
		  });
		  table = table+'</tbody></table>';
		  
		  var posting = $.post("Connections/colleagues_add.php", data);
		  $('#results').empty().html(table);
		  
			posting.done(function( data ) {
				$( "#results" ).append( data );
			});
	  }
    });
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="new_coll">
<textarea class="form-control" id="names" placeholder="Event description*" rows="3" required>
firstnameA,lastnameA,emailA
firstnameB,lastnameB,emailB
</textarea>
<button type="submit" id="verify" class="btn btn-primary btn-block">Verify</button>
</form>
<div class="col" id="results"></div>

Если вы закомментируете строку 16, она работает с таблицей, однако создание массива не работает. Мой файл, в который он публикуется, это просто дамп $ _POST.

Буду признателен за любые указатели!

Answer 1

Просто превратите ваши данные в многомерный массив, как показано ниже, зафиксируйте его с помощью JSON .stringify и отправьте в файл php. В php используйте json_decode, чтобы превратить его в php -ассив, а затем go с вашим материалом базы данных.

// SPLIT YOUR DATA BY NEWLINE
const data = document.getElementById("data").value.split("\n");

// BUILD NEW ARRAY
let json = [];
for (let i in data) {
  // SPLIT EACH LINE INTO ARRAY 
  // AND PUSH IT TO NEW ARRAY
  json.push(data[i].split(","));
}

// STRINGIFY YOUR NEW ARRAY 
console.log(JSON.stringify(json));

<textarea id="data" cols="50">
firstnameA,lastnameA,emailA
firstnameB,lastnameB,emailB</textarea>

Answer 2

Я вроде решил, рад получить больше информации!

(function($) {
  $(document).ready(function() {
    $('#add').hide();
    $('#new_coll').submit(function(e) {
      e.preventDefault();
	  if($("#names").val() != "") {
		  
		  var table = '<table class="table mt-4"><thead><th>First name</th><th>Last name</th><th>Email address</th></thead><tbody>';
		  var i = 0; 
		  var data = new Array()
		   
		  $.each($("#names").val().split(/\r?\n/), function(e, elements) {
			  table = table+'<tr>';
			  data[i] = new Array();
			  var j = 0;
			  $.each(elements.split(","), function(e, element) {
				table = table+'<td>'+element+'</td>';
				data[i][j] = element;
				j++;
			  });
			  table = table+'</tr>';
			  i++;
		  });
		  table = table+'</tbody></table>';
		  $('#results').empty().html(table);
		  console.log(data);
		  $('#add').show();
		  
		  $('#add').click(function(e) {
			$('#add').empty().html('<i class="fa fa-spin fa-spinner"></i>');
			var posting = $.ajax({ 	 url        : 'https://httpbin.org/post',
									 type       : 'POST',                                              
									 data       : {'data':JSON.stringify(data)},
									 success    : function(){ }
								   });
			posting.done(function( response ) {
				$( "#step2" ).append( response );
				$('#add').empty().html('Done');
			});
			
			
			posting.fail(function( response ) {
				$('#add').empty().html('Error');
			});
		  });
	  }
    });
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <form method="post" id="new_coll">
          <div class="form-row mb-2">
            <div class="col">
              <textarea class="form-control" id="names" placeholder="Event description*" rows="3" required>a1,a2,emaila
b1,b2,emailb</textarea>
            </div>
          </div>
          <div class="form-row mt-4">
            <div class="col">
              <button type="submit" id="verify" class="btn btn-primary btn-block">Verify</button>
            </div>
          </div>
        </form>
        <div class="form-row mb-2">
            <div class="col" id="results">
            	
            </div>
            <div class="col mt-2" id="step2">
                <button id="add" class="btn btn-primary btn-block">Add</button>
            </div>
        </div>

Почему-то часть PHP здесь не работает, но это тоже работает! Рад за любые улучшения!