Not to display the ID (title & value) while looping over json data array dynamically

Question

i have a json data Object, i loop over it with $.each to retrieve data dynamically, what i want to do is to display all except one value which is the ID, i don't want the ID to be displayed in the html structure. How can i do this please ? thank you

Here is my Json data Object :

$arrData['firstInfo']  = array('title'=> 'Cars');   
$arrData['secondInfo'] = array('id', 'reference', 'size','name');                                   
$arrData['thirdInfo']  = array(array('1', 'Ref12012', 'big', 'Toyota'),
                               array('2', 'Ref16489', 'small', 'Peugeot'),
                               array('3', 'Ref56479', 'medium', 'Mercedes')
                          );

Here is my code :

Html += '<div>';                            
$.each(arrData['secondInfo'], function(Idx, currentValue) 
{
    Html += '<div>'+ currentValue +'</div>';
});
Html += '</div>';

$.each(arrData['thirdInfo'], function(Idx, currentValue){
    Html += '<div>';
    // columns
    $.each(currentValue, function(Idx, currentValueCol){
        Html += '<div>'+ currentValueCol +'</div>';                             
    });
    Html += '</div>';
});

Answer 1

You may accomplish that by keeping the index of the "Id" field and using it on last loop. On the following fiddle, indexOfIdField keeps that data.

var arrData = {"firstInfo":{"title":"Cars"},"secondInfo":["id","reference","size","name"],"thirdInfo":[["1","Ref12012","big","Toyota"],["2","Ref16489","small","Peugeot"],["3","Ref56479","medium","Mercedes"]]};
var Html = '';

Html += '<div>';
var indexOfIdField = -1;
$.each(arrData['secondInfo'], function(Idx, currentValue) 
{
     if(currentValue == 'id'){
          indexOfIdField = Idx;
      }else{
          Html += '<div>'+ currentValue +'</div>';
      }
    
});
Html += '</div>';

$.each(arrData['thirdInfo'], function(Idx, currentValue){
    Html += '<div>';
    // columns
    $.each(currentValue, function(Idx, currentValueCol){
      if(indexOfIdField != Idx){
            Html += '<div>' + currentValueCol +'</div>';                             
        }
    });
    Html += '</div>';
});

 $('#content').html(Html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">

</div>

I suggest you to define your data array in a different way. In this way, you may use field names while looping (Idx variable).

$arrData['firstInfo']  = array('title'=> 'Cars');   
$arrData['dataList'] = [
    [
        'id' => 1,
        'reference' => 'Ref12012',
        'size' => 'big',
        'name' => 'Toyota'
    ],
    [
        'id' => 2,
        'reference' => 'Ref16489',
        'size' => 'small',
        'name' => 'Toyota'
    ],
    [
        'id' => 3,
        'reference' => 'Ref56479',
        'size' => 'medium',
        'name' => 'Toyota'
    ]
];

Answer 2

I found a simple way to skip the first line with the loop iteration, just by adding this

function(i) {
    if (i > 0)
        DoStuff();
}