How to navigate throught this JSON object and get it's values?

Question

I have an JSON array (object), and I want to navigate throuhgt it and get it's values. But I'm getting :"Uncaught TypeError: Cannot read property 'code' of undefined".

This is the array:

{
    "producto": [
        [
            {
                "id": "1087",
                "code": "119025",
                "code2": "9025",
                "name": "S22.ARABE MEDITERRANEO SANDWICH "
            }
        ]
    ],
    "componentes": [
        [
            {
                "id": "1759",
                "code": "31037025",
                "code2": "31750",
                "name": "TOMATE SECO X KL",
                "quantity": "0.025",
                "costo": "0.00000000000000000000"
            }
        ],
        [
            {
                "id": "1691",
                "code": "31032006",
                "code2": "7792070010548",
                "name": "31201.ACEITUNAS VERDES  EN RODAJASX KL",
                "quantity": "0.030",
                "costo": "0.00000000000000000000"
            }
        ],
        [
            {
                "id": "1724",
                "code": "31042028",
                "code2": "33211",
                "name": "LECHUGA X KILO",
                "quantity": "0.010",
                "costo": "0.00000000000000000000"
            }
        ],
        [
            {
                "id": "1741",
                "code": "31062014",
                "code2": "34210",
                "name": "QUESO  MOZZARELLA  X KL",
                "quantity": "0.075",
                "costo": "0.00000000000000000000"
            }
        ],
        [
            {
                "id": "435",
                "code": "111095",
                "code2": "1095",
                "name": "PAN ARABE BLANCO X KILO",
                "quantity": "0.160",
                "costo": "2653.0000000000000000"
            }
        ],
        [
            {
                "id": "1742",
                "code": "31062004",
                "code2": "34208",
                "name": "QUESO  POLENGY X KL",
                "quantity": "0.050",
                "costo": "0.00000000000000000000"
            }
        ],
        [
            {
                "id": "1719",
                "code": "31016006",
                "code2": "32602",
                "name": "JAMONADA  X KL",
                "quantity": "0.050",
                "costo": "0.00000000000000000000"
            }
        ],
        [
            {
                "id": "1694",
                "code": "31042005",
                "code2": "33203",
                "name": "ALBAHACA X KL",
                "quantity": "0.005",
                "costo": "0.00000000000000000000"
            }
        ]
    ]
}

I have an html view, and I want to show the values of the array in a table. I'm doing it like this:

var html = '';
            html += '<h2>';
            html += 'Costo de Produccion';
            html += '</h2>';
            html += '<table id="items" cellpadding="0" cellspacing="0" style="width:500px;">'
            html += '<tr>';
            html +=     '<th>Codigo</th>';
            html +=     '<th>Codigo Secundario</th>';
            html +=     '<th>Producto</th>';
            html +=     '<th>Cantidad</th>';
            html +=     '<th>Costo</th>';
            html += '</tr>';
            html += '<tr>';
            html +=     '<td class="code">';
            html +=         '<input type="hidden" value="" class="id">';
            html +=         producto['producto']['code'];
            html +=         '&nbsp;';
            html +=     '</td>';
            html +=     '<td class="code2">';
            html +=         producto['producto']['code2'];
            html +=         '&nbsp;';
            html +=     '</td>';
            html +=     '<td class="name">';
            html +=         producto['producto']['name'];
            html +=         '&nbsp;';
            html +=     '</td>';
            html +=     '<td class="quantity">';
            html +=         cantidad;
            html +=         '&nbsp;';
            html +=     '</td>';
            html += '</tr>';
            html += '</table>';



            html += '<h2 style="padding-top: 50px;">';
            html += 'Materia Prima Necesaria';
            html += '</h2>';
            html += '<table id="items" cellpadding="0" cellspacing="0" style="width:500px;">'
            html += '<tr>';
            html +=     '<th>Codigo</th>';
            html +=     '<th>Codigo Secundario</th>';
            html +=     '<th>Componente</th>';
            html +=     '<th>Cantidad</th>';
            html +=     '<th>Costo</th>';
            html += '</tr>';
            for (var i = 0; i < producto['componentes'].length; i++) 
            {

                html += '<tr>';
                html +=     '<td class="code">';
                html +=         '<input type="hidden" value="" class="id">';
                html +=         producto[i]['code'];
                html +=         '&nbsp;';
                html +=     '</td>';
                html +=     '<td class="code2">';
                html +=         producto[i]['code2'];
                html +=         '&nbsp;';
                html +=     '</td>';
                html +=     '<td class="name">';
                html +=         producto[i]['name'];
                html +=         '&nbsp;';
                html +=     '</td>';
                html +=     '<td class="quantity">';
                html +=         cantidad * producto[i]['quantity'];
                html +=         '&nbsp;';
                html +=     '</td>';
                // html +=  '<td class="cost">';
                // html +=      cost;
                // html +=      '&nbsp;';
                // html +=  '</td>';
                html += '</tr>';
                html += '</table>';

            };

This is the error that show the debugger:

Please help. Thanks

Answer 1

"producto": [
    [
        {
            "id": "1087",
            "code": "119025",
            "code2": "9025",
            "name": "S22.ARABE MEDITERRANEO SANDWICH "
        }
    ]
],

producto is an array with one array with one item. Should be producto['producto'][0][0]['name'].