What is wrong with this code? Error missing ")"

Question

The code is working as it is except for this line

$('#ReplenishItem').append('<tr><td><input type="hidden" name="" value="' + data[0].itemCode + '"/>\n\<input type="text" value="' + data[0].productName + '"/> \n\</td><td>\n\<select name="size">'
for (var y in data) {
    '\<option value="' + data[y].size + '">' + data[y].size + '\</option>'
}
'\</select>\n\</td>\n\</tr>');
}

I tried deleting the line above and it works, also tried appending without the loop and it works. I dont need the proper way to make this but hopefully the above code can work

var x = true;

function autoCompleteWarehouseInventory() {
    $("#productName").devbridgeAutocomplete({
        serviceUrl: 'searchWarehouseInv',
        type: 'POST',
        showNoSuggestionNotice: true,
        noSuggestionNotice: 'No Exsiting Product',
        onSelect: function (event, ui) {
            var productName = document.getElementById('productName').value;
            $.ajax({
                type: 'POST',
                url: 'SetWarehouseInvServlet',
                dataType: 'json',
                data: {
                    productName: productName
                },
                success: function (data) {
                    if (x) {
                        $('#ReplenishItem').append('<tr>\n\
                            <th>Product Name</th><th>Color</th><th>Size</th><th>Quantity</th></tr>');
                        x = false;
                    };
                    $('#ReplenishItem').append('<tr><td><input type="hidden" name="" value="' + data[0].itemCode + '"/>\n\<input type="text" value="' + data[0].productName + '"/> \n\</td><td>\n\<select name="size">'
                    for (var y in data) {
                        '\<option value="' + data[y].size + '">' + data[y].size + '\</option>'
                    }
                    '\</select>\n\</td>\n\</tr>')
                }
            });
        }
    });
}

Answer 1

You cannot have a for...in loop inline with a string concatenation like that.

You can use Array.prototype.map and Array.prototype.join to format the string of <option> elements from data .

eg:

$('#ReplenishItem').append('<tr><td><input type="hidden" name="" value="'+ data[0].itemCode +'"/>\n\
                           <input type="text" value="'+ data[0].productName +'"/> \n\
                           <td><td>\n\
                            <select name="size">' 
                               + data.map(function(opt) { return '<option value="'+ opt.size +'">'+ opt.size + '</option>' }).join("") 
                           + '</select>\n\
                           </td>\n\
                           </tr>');

Answer 2

You should try to use an editor that pairs up your braces and parentheses. :)

Try this:

var x =true;
function autoCompleteWarehouseInventory() {
    $("#productName").devbridgeAutocomplete({
        serviceUrl: 'searchWarehouseInv',
        type: 'POST',
        showNoSuggestionNotice: true,
        noSuggestionNotice: 'No Exsiting Product',
        onSelect: function (event, ui) {
            var productName = document.getElementById('productName').value;
            $.ajax({
                type: 'POST',
                url: 'SetWarehouseInvServlet',
                dataType: 'json',
                data: {
                    productName: productName
                },
                success: function (data) {
                    if(x){
                        $('#ReplenishItem').append('<tr>\n<th>Product Name</th><th>Color</th><th>Size</th><th>Quantity</th></tr>');
                        x = false;
                    }
                    var options = '';
                    for(var y in data){
                        options += '<option value="'+ data[y].size +'">'+ data[y].size + '</option>';
                    }
                    $('#ReplenishItem').append(
                            '<tr>'+
                                '<td>'+
                                    '<input type="hidden" name="" value="'+ data[0].itemCode +'"/>'+
                                    '<input type="text" value="'+ data[0].productName +'"/>'+
                                '</td>'+
                                '<td>'+
                                    '<select name="size">'+
                                        options
                                    '</select>'+
                                '</td>'+
                            '</tr>');
                }
            });
        }
    });
}