Json firebase add

by csornmo

HTML

<form id="form" class="col-md-12">
    <div class="place form-group border-top pt-4 row" data-customer="CompanyA"><br>
        <label class="h5 mb-3 border-bottom col-md-12"><b>CompanyA</b></label>
        <div class="cityInput form-row">
            <div class="form-group col-md-2"><label>New York</label><input type="number" class="form-control" data-customer="CompanyA" data-city="New York" min="0" value="1"/></div>
            <div class="form-group col-md-2"><label>Tokyo</label><input type="number" class="form-control" data-customer="CompanyA" data-city="Tokyo" min="0" value="3"/></div>
            <div class="form-group col-md-2"><label>Los Angeles</label><input type="number" class="form-control" data-customer="CompanyA" data-city="Los Angeles" min="0" value="5"/></div>
            <div class="form-group col-md-2"><label>London</label><input type="number" class="form-control" data-customer="CompanyA" data-city="London" min="0" value="6"/></div>
            <div class="form-group col-md-12"><label>Message</label><textarea class="form-control" data-customer="CompanyA">Test message for CompanyA</textarea></div>
        </div>
    </div>
    <div class="place form-group border-top pt-4 row" data-customer="CompanyB">
        <label class="h5 mb-3 border-bottom col-md-12"><b>CompanyB</b></label>
        <div class="cityInput form-row">
            <div class="form-group col-md-2"><label>New York</label><input type="number" class="form-control" data-customer="CompanyB" data-city="New York" min="0" value="3"/></div>
            <div class="form-group col-md-2"><label>Tokyo</label><input type="number" class="form-control" data-customer="CompanyB" data-city="Tokyo" min="0" value="1"/></div>
            <div class="form-group col-md-2"><label>Los Angeles</label><input type="number" class="form-control" data-customer="CompanyB" data-city="Los Angeles" min="0" value="2"/></div>
            <div class="form-group col-md-2"><label>London</label><input type="number"...

CSS

label.h5 {
   margin-bottom: 10px;
   display: block;
}
.place {
    margin-bottom: 30px;
    display: inline-block;
    margin: 0 20px;
}
.cityInput label {
    display: block;
    margin-top: 10px;
}

JavaScript

var array = [];
$('#form .cityInput').each(function() {
    var customer = $(this).find('input').attr('data-customer');
    var message = $(this).find('textarea').val();
    var city = $.map($(this).find('input'), function(elm, i) { 
    	 return { name: $(elm).attr('data-city'), value: $(elm).val() };
    });

    array.push({
        customer: customer,
        message: message,
        city: city

    });

});
console.log(array)