Как добавить блок если его не существует?

Question

[venaf34228]

Добрый день!
Имеется json в таком формате

{
  "dialog": [
    {
      "date": "16-04-2020",
      "time": "10:35",
      "text": "Текст сообщения 3"
    },
    {
      "date": "16-04-2020",
      "time": "09:16",
      "text": "Текст сообщения 2"
    },
    {
      "date": "15-04-2020",
      "time": "18:59",
      "text": "Текст сообщения 1"
    }
  ]
}

$.ajax({
    url: 'chat.php',
    type: "GET",
    dataType: "json",
    success: function(json) {
        if (typeof(json.dialog) == 'object') {
            $('div.dialog').append(json.dialog.map(function(n) {
                return '<div><span name="text">' + n.text + '</span><span name="time">' + n.time + '</span></div>';
            }).join(''));
        }
    }
});

Как вывести блоки в таком формате:

<div class="dialog">
   <div>16-04-2020</div>
   <div><span name="text">Текст сообщения 3</span><span name="time">10:35</span></div>
   <div><span name="text">Текст сообщения 2</span><span name="time">09:16</span></div>
   <div>15-04-2020</div>
   <div><span name="text">Текст сообщения 1</span><span name="time">18:59</span></div>
</div>

т.е. необходимо вывести блок с датой
<div>%date%</div>
И после этого вывести все записи относящиеся к этой дате, и тд.

Answer 1

[Just Me]

if (typeof(json.dialog) == 'object') {

	const _dialog = json.dialog.reduce((acc,cur,i,a)=>{
		const index = acc.findIndex(item => item.date === cur.date)	
		if( index !== -1 ){
			acc[index].message.push({text: cur.text, time: cur.time})
		}else{
			cur.message = []
			cur.message.push({text: cur.text, time: cur.time})
			acc.push(cur)
		}
		
		return  acc
	},[])

	$('div.dialog').html(_dialog.map(item => {
		let div = `<div>${item.date}</div>`
		item.message.forEach(_item => {
			div += `<div><span name="text">${_item.text}</span><span name="time">${_item.time}</span></div>`
		})
		return div;
	}).join(''));

}

Comments

[Just Me]

я надеюсь, ты вставил этот код в ф-цию

success: function(json) {
...
}

Answer 2

[Арсений Матыцин]

1. По факту отгрузки json стоит передать его в другую функцию.
2. Которая получит данные и обработает в, идеале отсортирует по дате.
3. Еще проще — сформировать массив из объектов, где будет:

[
  {
    date: ...
     messages: [...]
  },
]

Такой объект просто тупо легче вывести в шаблон.
4. Далее вывести всю эту срань по условиям: дата + сообщения, в которых эта дата совпадает.