Problem looping through some custom data in Javascript

I am working on some custom application built with Laravel on the backend and some javascript on the frontend. I have some errors that I have pulled from the backend and logging it in console tab. Am trying to loop through the object containing array of error messages and displaying the error messages in the DOM in an alert error field. When I loop am getting only the keys displayed but I want the values.

Javascript Object in console tab

travellerEmail: Array [ "The traveller email field is required." ]
​
travellerId: Array [ "The traveller id field is required." ]
​
travellerKra: Array [ "The traveller kra field is required." ]
​
travellerPassport: Array [ "The traveller passport field is required." ]

My logic

 let validation = error.responseJSON.errors;
 //console.log(validation);

let errors = document.getElementById("errorDiv");
$(errors).css('display' , 'block');

for(vald in validation){    
    errors.innerHTML += vald + '\n';
}

Markup Document to populate

<div class="row">
    <div class="col-12 text-center">
        <div class="alert alert-danger" id="errorDiv" role="alert" style="display: none;">
        </div>
    </div>
</div>

Value am getting after running the logic above

travellerPassport travellerKra travellerId travellerEmail