Why duplicates in ModelBranch div on results?
Hi every, I've
this code and I'm having some issues. If you take a closer look to it you'll see what I'm trying to do is just create non repeated Model-Branch pairs and put the result in div#ModelBranch but something is wrong in my logic since I get repeated results on the div and I can't get where my error is, so any help on this first doubt?
Now as a second doubt and related to the same code, I need an additional feature and again does not know how to achieve so need some push or help from people here. After have the unique pairs Model-Branch then I should establish a ManyToMany relationship between the results (Model-Branch) and Manufactures but again pairs have to bee unique, any advice around this code?
For those who doesn't like Fiddle here is the HTML & jQuery code:
- <fieldset class="rpni-border">
- <legend class="rpni-border">Model</legend>
- <table id="contenedorModelos" style="" class="table table-condensed">
- <tbody id="modeloBody">
- <tr>
- <td>
- <input type="radio" value="1" id="selModelo1" name="selModelos">
- </td>
- <td>Harum.</td>
- </tr>
- <tr>
- <td>
- <input type="radio" value="4" id="selModelo4" name="selModelos">
- </td>
- <td>Pariatur ut.</td>
- </tr>
- <tr>
- <td>
- <input type="radio" value="6" id="selModelo6" name="selModelos">
- </td>
- <td>Tempore animi.</td>
- </tr>
- <tr>
- <td>
- <input type="radio" value="8" id="selModelo8" name="selModelos">
- </td>
- <td>Voluptatem.</td>
- </tr>
- </tbody>
- </table>
- </fieldset>
- <fieldset class="rpni-border">
- <legend class="rpni-border">Branch</legend>
- <table id="contenedorMarcas" style="" class="table table-condensed">
- <tbody id="marcaBody">
- <tr>
- <td>
- <input type="radio" value="3" id="selMarca3" name="selMarcas">
- </td>
- <td>Ea in sequi.</td>
- </tr>
- <tr>
- <td>
- <input type="radio" value="7" id="selMarca7" name="selMarcas">
- </td>
- <td>Exercitationem.</td>
- </tr>
- <tr>
- <td>
- <input type="radio" value="11" id="selMarca11" name="selMarcas">
- </td>
- <td>Sit alias sit.</td>
- </tr>
- </tbody>
- </table>
- </fieldset>
- <fieldset class="rpni-border">
- <legend class="rpni-border">Manufacturer</legend>
- <table id="contenedorFabricante" style="" class="table table-condensed">
- <tbody id="fabricanteBody">
- <tr>
- <td>
- <input type="checkbox" value="3">
- </td>
- <td>Ea in sequi.</td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" value="7">
- </td>
- <td>Exercitationem.</td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" value="11">
- </td>
- <td>Sit alias sit.</td>
- </tr>
- </tbody>
- </table>
- </fieldset>
- <button id="create" type="button">Create</button>
- <div id="ModelBranch"></div>
- <button id="createM" type="button">Join Model-Branch with Manufacturer</button>
- <div id="ModelBranchManufacturer"></div>
jQuery:
- $(document).ready(function () {
var map = {};
var array = [];
var arrayM = [];
var $html = '<table><tbody id="branchModelManufacturer">';
$("#create").on("click", function () {
var $model = $("#modeloBody").find("input[type='radio']:checked").val(),
$branch = $("#marcaBody").find("input[type='radio']:checked").val();
if ($model && $branch) {
var key = $model + '-' + $branch;
if (!map[key]) {
map[key] = true;
array.push({
model: $model,
maca: $branch
});
$html += '<tr><td><input type="checkbox" value="' + key + '" /></td>';
$html += '<td>' + $model + '-' + $branch + '</td></tr>';
$("#ModelBranch").append($html);
console.log(JSON.stringify(array));
}
}
$html += '</tbody></table>';
});
$("#createM").on("click", function () {
var $allCheckboxes = $("#branchModelManufacturer").find("input[type='checkbox']");
});
});