I'm trying to render some objects in a div on windows load .. the object is in fact passed but I'm having trouble doing work on it in the function.. I can't add an onclick method nor format some of the strings .. (I checked this but I'm able to format the same object like I intend in other functions in the same file..)
I'm serializing my objects like this
[HttpGet]
public string GetCartItems(string customerId)
{
var items = _context.Carts
.Include(b => b.Item)
.Where(b => b.Item.Status == BookingStatus.Available && b.CustomerId == customerId).ToList()
.Select(b => b.Item.ToCalendarEvent()).ToList();
return JsonConvert.SerializeObject(items);
}
In my js file I'm calling this function on load
function renderCartItems() {
//this function renders all the cart elements into the cart in home/mentor
const customerId = $("#customerId").html();
//ensure all html elements in the cart are cleared
var $div = $('#mentorItems');
while ($div.firstChild) {
$div.removeChild($div.firstChild);
}
//render all the events as html in the cart
$.getJSON(`/Cart/GetCartItems?customerId=${customerId}`,
function (data) {
data.forEach(function(e) {
addEventToCartHtml(e);
});
});
}
The addEventToCartHtml function:
function addEventToCartHtml(event) {
const name = $("#mentorName").html();
const price = $("#mentorHourly").html();
const customerId = $("#customerId").html();
var start = event.start.format("MM/DD: HH:mm");
var end = event.end.format("MM/DD: HH:mm");
var $div = $('<div id="' + event.id + '" class="alert alert-dismissable"></div>');
var $btn = $('<button class="close" data-dismiss="alert">×</button>');
var $name = $('<p> ' + name + ' - 1 time</p>');
var $time = $('<p class="time"> ' + start + ' - ' + end + '</p>');
var $hourly = $('<p>Timepris: ' + price + ' kr.</p>');
$btn.on('click', function () { removeEvent(event); });
$div.append($btn);
$div.append($name);
$div.append($time);
$div.append($hourly);
$('#mentorItems').append($div);
//mark the vent as grey
event.color = "grey";
updateEvent(event);
}
I've tried to debug it in Chrome and the event does get passed to the object.. but says event.start.format is not a defined function..
SOLUTION:
I was double-serializing my objects, so I followed the instructions in "dbc"'s comments!
I also formatted my date strings like this :
start = moment(event.start, 'YYYY-MM - DD[T]HH: mm: ss').format('DD/MM: HH:mm');