Row from database dont compare Ajax, Jquery

Question

Hi i got problem to compare all row from tables. I mean i want compare elements from pivot table(save_events) with row from table(events). I do fetching this element from both tables. And its for fine next i want it compare and its almost work but only working on only one row. When i get 2 row in save_events table its working only for one. And i really dont know how i can figure it.

Information about tables from database: 1.Save_events got 5 columns. column name: id,create_at,update_at,users_id,events_id 2.Events got 7 columns. column name: id,name,title,start,end,create_at,update_at

How it should work: I got few rols eg. user with role 'Moderator' can create event on calendar(i use fullcalendar.io), next events showing on calendar and normal user can sign up on event. For this i make relationship many to many. Next think all event got color depending of their tittle eg. if title will be 'Wydzial 1' is color red. Next if user sign up on event this event change color for grey. This last think almost working but only work for 1 event. I mean if user sign up to eg.2 event only 1 event change color to grey. I was thinking maybe its not working becouse one table is fetching array elements and second was object so i change second to array and then compare but still doesnt work.

<script src="{{ asset('js/fullcalendar') }}/fullcalendar.js"></script>
<script src="{{ asset('js/bootstrap.js') }}"></script>
<script type="text/javascript">

$(document).ready(function() {

var base_url = '{{ url('/') }}'; 
$.ajax(
{    
    type: "GET",
    url: "{!!route('color')!!}",             
    dataType: "json",
    data:{"events_id": '' },                 
    success: function(data)
    {
      var JSONString=data;


    $('#bootstrapModalFullCalendar').fullCalendar({
weekends: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
eventClick: function(event, jsEvent, view) {
  $('#modalTitle').html(event.title);
  $('#modalBody').html(event.name);
  $('#eventUrl').attr('href','/home/zapis/'+event.id);
  $("#startTime").html(moment(event.start).format('HH:mm '));
  if (event.end) $("#endTime").html(moment(event.end).format('HH:mm '));
  else $("#endTime").html('');					    
  $('#fullCalModal').modal();
  return false;
},

eventLimit: true,
FirstDay: 1,
    contentheight : 650,
    editable : true,
    allDay : false,
    aspectRatio : 2,
    slotLabelFormat : 'HH:mm:ss',
    timeFormat : 'HH:mm',
    displayEventEnd : true,
    events: {
url: base_url + '/api',
error: function() {
  alert("cannot load json");
}
},
eventColor: 'white',

eventAfterRender: function (event, element, view) {				

for (i = 0; i < data.eventColored.length; i++)
{	
console.log(event.id+'=event.id');
console.log(data.eventColored[i]);

if(event.id==data.eventColored[i].events_id)
{

        element.css('background-color', '#cccccc');

}

  else
  {
    if (event.title == "Wydzial 1") 
    {
        element.css('background-color', '#378006');
        }
        else if(event.title == "Wydzial 2")
        {
        element.css('background-color', '#ff0000');	
        }
        else if(event.title == "Wydzial 3")
        {
        element.css('background-color', '#73e600');	
        }
        else{
        element.css('background-color', '#0066ff');
        }
      }			
}


}
});		    
}	       		        				   
});
});

</script>

Console result:

1=event.id home:250:4 Object { events_id: 1 } home:251:4 1=event.id home:250:4 Object { events_id: 8 } home:251:4 5=event.id home:250:4 Object { events_id: 1 } home:251:4 5=event.id home:250:4 Object { events_id: 8 } home:251:4 6=event.id home:250:4 Object { events_id: 1 } home:251:4 6=event.id home:250:4 Object { events_id: 8 } home:251:4 7=event.id home:250:4 Object { events_id: 1 } home:251:4 7=event.id home:250:4 Object { events_id: 8 } home:251:4 8=event.id home:250:4 Object { events_id: 1 } home:251:4 8=event.id home:250:4 Object { events_id: 8 } home:251:4 9=event.id home:250:4 Object { events_id: 1 } home:251:4 9=event.id home:250:4 Object { events_id: 8 } home:251:4 10=event.id home:250:4 Object { events_id: 1 } home:251:4 10=event.id home:250:4 Object { events_id: 8 }

Answer 1

You said

"only 1 event change color to grey"

Looking at your data, this will be the element with ID 8, I think. You are also expecting element with ID 1 to turn grey as well.

This isn't strictly true, however. Element 1 does turn grey, but only for a moment. This is because when you match an element, you don't break out of the loop.

So the flow for element 1 goes like this:

1. Start loop, where Event.ID == 1, and data.eventColored[i].events_id == 1.
2. If statement is true, so background colour is changed to grey.
3. Next iteration of the loop, where Event.ID == 1, but data.eventColored[i].events_id == 8
4. If statement is false, so the "else" code runs, and changes the background colour to something else, based on the title.

The reason "8" is changing colour with no problem is because it happens to be the last element in the eventColored array. Therefore, once it's matched, there are no further elements to loop through, so a subsequent mismatch cannot occur, and the grey background colour change is not over-written.

To prevent this problem, you simply have to break out of the loop when you match an ID. This will prevent the loop from continuing and changing the background back again when the next ID does not match.

This will fix it:

if(event.id==data.eventColored[i].events_id)
{
  element.css('background-color', '#cccccc');
  break; //stop the loop
}