Emin Çiftçi Emin Çiftçi - 21 days ago 6
Javascript Question

Javascript nested .each() function

I try to create a calculator keypad.
Onclick functions work properly. My problem is with .each() funtion. How can I traverse the my

buttonArray
?. I could not handle the nested arrays and appends
<p>
to
<div>
as same
<input>
append to
<p>
.

My script is like:

var buttonArray = [
[{
type: 'button',
className: 'sil',
value: 'C'
}, {
type: 'button',
className: 'hepsiniSil',
value: 'AC'
},

],
[{
type: 'button',
className: 'buttons',
value: '7'
}, {
type: 'button',
className: 'buttons',
value: '8'
}, {
type: 'button',
className: 'buttons',
value: '9'
}, {
type: 'button',
className: 'buttons',
value: '*'
}],
[{
type: 'button',
className: 'buttons',
value: '4'
}, {
type: 'button',
className: 'buttons',
value: '5'
}, {
type: 'button',
className: 'buttons',
value: '6'
}, {
type: 'button',
className: 'buttons',
value: '-'
}],
[{
type: 'button',
className: 'buttons',
value: '1'
}, {
type: 'button',
className: 'buttons',
value: '2'
}, {
type: 'button',
className: 'buttons',
value: '3'
}, {
type: 'button',
className: 'buttons',
value: '+'
}],
[{
type: 'button',
className: 'buttons',
value: '0'
}, {
type: 'button',
className: 'esit',
value: '=',
click: 'esittir'
}, {
type: 'button',
className: 'buttons',
value: '/'
}]
]

$(document).ready(function() {
$.each(function(index, buttonArray) {
$("<p>").each(function(subIndex, subArrays) {
$("<input>")
.addClass(subArrays.className)
.val(subArrays.val)
.appendTo(this)
});
});
});


and I want to this output:

<p>
<input type="button" class="sil" value="C" style="width:50px">
<input type="button" class="hepsiniSil" value="AC" style="width:50px">
</p>
<p>
<input type="button" class="buttons" value="7">
<input type="button" class="buttons" value="8">
<input type="button" class="buttons" value="9">
<input type="button" class="buttons" value="*">
</p>
<p>
<input type="button" class="buttons" value="4">
<input type="button" class="buttons" value="5">
<input type="button" class="buttons" value="6">
<input type="button" class="buttons" value="-">
</p>
<p>
<input type="button" class="buttons" value="1">
<input type="button" class="buttons" value="2">
<input type="button" class="buttons" value="3">
<input type="button" class="buttons" value="+">
</p>
<p>
<input type="button" class="buttons" value="0">
<input type="button" class="esit" value="=" style="width:50px" onclick='esittir()'>
<input type="button" class="buttons" value="/">

</p>

Answer

$.each 1st parameter is the array to iterate, the 2nd is the callback:

jQuery.each( array, callback )

The callback returns the iterated item as the 2nd param:

callback

Type: Function( Integer indexInArray, Object value ) The function that will be executed on every object.

In addition this in $.each() is the value of the item, you can't append to it.

You need to iterate the outer array, create a <p> element an append him to the container. Then iterate the sub arrays, create <input> (or just a <button> element), and append them to their <p> container:

var buttonArray = [
  [{
      type: 'button',
      className: 'sil',
      value: 'C'
    }, {
      type: 'button',
      className: 'hepsiniSil',
      value: 'AC'
    },

  ],
  [{
    type: 'button',
    className: 'buttons',
    value: '7'
  }, {
    type: 'button',
    className: 'buttons',
    value: '8'
  }, {
    type: 'button',
    className: 'buttons',
    value: '9'
  }, {
    type: 'button',
    className: 'buttons',
    value: '*'
  }],
  [{
    type: 'button',
    className: 'buttons',
    value: '4'
  }, {
    type: 'button',
    className: 'buttons',
    value: '5'
  }, {
    type: 'button',
    className: 'buttons',
    value: '6'
  }, {
    type: 'button',
    className: 'buttons',
    value: '-'
  }],
  [{
    type: 'button',
    className: 'buttons',
    value: '1'
  }, {
    type: 'button',
    className: 'buttons',
    value: '2'
  }, {
    type: 'button',
    className: 'buttons',
    value: '3'
  }, {
    type: 'button',
    className: 'buttons',
    value: '+'
  }],
  [{
    type: 'button',
    className: 'buttons',
    value: '0'
  }, {
    type: 'button',
    className: 'esit',
    value: '=',
    click: 'esittir'
  }, {
    type: 'button',
    className: 'buttons',
    value: '/'
  }]

];


var $calculator = $('#calculator');

$.each(buttonArray, function(index, buttons) {
  var $p = $('<p>').appendTo($calculator);

  $.each(buttons, function(subIndex, button) {
    $('<input>')
      .addClass(button.className)
      .prop('type', button.type)
      .val(button.value)
      .appendTo($p)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="calculator"></div>