0

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">&times;</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');
J.Kirk.
  • 943
  • 3
  • 12
  • 32

0 Answers0