Почему метод push() добавляет запятую?

296

05 апреля 2017, 15:17

Столкнулась с проблемой следующего рода. Необходимо динамически рендерить с сервера данные...

Данные получаю в таком формате

task={'1': [{'text': 'Задача раз'}, {'date': 'Сегодня'}, {'acept': 'Готово'}], 
      '2': [{'text': 'Задача два'}, {'date': 'Завтра'}, {'acept': 'В процессе'}], 
}

Для обработки и рендеринга использую следующий код

    function getAndRenderTasks(){ 
		$.getJSON("/tasks/api/v1.0/tasks",	function (data) { 
		 
		var tasks = [] // Место хранения всех задач 
		 
		$.each( data, function(key, val) { // Перебираем ключи и значения 
										   // пришедших в ответе 
 
 			var taskData = [] // Данные одной задачи 
 
			for (var i = 0; i < val.length; i++) { // хешы задачи 
			  	 
			  	$.each(val[i], function(key1, val1){ // достаем данные из хеша 
					taskData.push( "<div class='"+key1+"'>"+val1+"</div>") // ложим добытые значения в массив таска 
				}) 
			} 
 
			tasks.push( "<div taskId='"+key+"'>"+taskData+"</div>") // добавляем в общий список 
 
		}) 
		  
		$( "<div/>", { // Рендерим список 
		    "class": "my-new-list", 
		    html: tasks.join("_______________") 
		  }).appendTo( "body") 
		}) 
	}

На выходе получаю следующее

Задача раз
,
Сегодня
,
Готово
_______________
Задача два
,
Завтра
,
В процессе

как убрать запятые? Они мне не нужны...

Answer 1

Дело в том, что у вас taskData — массив, а его представление в строке является перечисление значений через запятую.

Пример:

var test = [1,2,3].toString(); 
 
console.log(test);

Чтобы их объединить в строку, воспользуйтесь методом join c "пустотой" в качестве разделителя:

taskData.join('')

Всё....

Итог:

task = { '1': [{'text': 'Задача раз'}, {'date': 'Сегодня'}, {'acept': 'Готово'}], 
        '2': [{'text': 'Задача два'}, {'date': 'Завтра'}, {'acept': 'В процессе'}], 
}; 
 
//var tasks = [] // Место хранения всех задач 
var tasks = []; // Место хранения всех задач 
$.each(task, function(key, val) { // Перебираем ключи и значения 
  // пришедших в ответе 
 
  var taskData = []; // Данные одной задачи 
 
  for (var i = 0; i < val.length; i++) { // хешы задачи 
 
    $.each(val[i], function(key1, val1) { // достаем данные из хеша 
      taskData.push("<div class='" + key1 + "'>" + val1 + "</div>"); // ложим добытые значения в массив таска 
    }); 
  } 
 
  tasks.push("<div taskId='" + key + "'>" + (taskData.join('')) + "</div>"); // добавляем в общий список     
}); 
 
$("<div/>", { // Рендерим список 
  "class": "my-new-list", 
  html: tasks.join("_______________") 
}).appendTo("body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="my-new-list"></div>

Answer 2

Проблема заключается в том, что запятые добавляются не при join, а в момент сбора следующей строки

"<div taskId='"+key+"'>"+taskData+"</div>"

где taskData так же является массивом. В этом случае он приводится к строке, при этом у него вызывается метод toString, результат которого эквивалентен вызову array.join(), что в свою очередь эквивалентно вызову array.join(',')

Для того, чтобы убрать запятую нужно вызвать join напрямую, например:

var task = { 
  '1': [{ 
    'text': 'Задача раз' 
  }, { 
    'date': 'Сегодня' 
  }, { 
    'acept': 'Готово' 
  }], 
  '2': [{ 
    'text': 'Задача два' 
  }, { 
    'date': 'Завтра' 
  }, { 
    'acept': 'В процессе' 
  }], 
} 
var tasks = [] // Место хранения всех задач 
 
$.each(task, function(key, val) { // Перебираем ключи и значения 
  // пришедших в ответе 
 
  var taskData = [] // Данные одной задачи 
 
  for (var i = 0; i < val.length; i++) { // хешы задачи 
 
    $.each(val[i], function(key1, val1) { // достаем данные из хеша 
      taskData.push("<div class='" + key1 + "'>" + val1 + "</div>") // ложим добытые значения в массив таска 
    }) 
  } 
 
  tasks.push("<div taskId='" + key + "'>" + taskData.join('') + "</div>") // добавляем в общий список 
 
}) 
 
$("<div/>", { // Рендерим список 
  "class": "my-new-list", 
  html: tasks.join("_______________") 
}).appendTo("body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Создание интернет-магазина одежды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не могу получить html

Есть форма с элементами внутри, типа:

241

CSS

Bootstrap настройка navbar меню

Добрый вечерКак в navbar ul - меню разместить по центру страницы

736

CSS

CSS темы на вордпрессе

Есть два момента, которые своими силами я все никак не могу довести до ума:

262

CSS

подключение css файлов в angularJS

У меня приложение на angularJSВ главном файле index

219