Loop through array on button click

Question

I have an array that I put into my file through json_encode(); from my .php file. The array looks like this:

{
  "15800175": {
    "posID": "159469",
    "scanID": "22597",
    "anr": "15800175",
    "TVanr": "",
    "code": "G-09-27-2E",
    "ean": "4710069680575",
    "marke": "fox",
    "bez": "jersey yellow",
    "bez2": "size xl",
    "menge": "1",
    "ve": "St\u00fcck",
    "Dimensionstext": "TT9857BG\r\n",
    "Langtext": ""
  },
  "15100027": {
    "posID": "159471",
    "scanID": "22597",
    "anr": "15100027",
    "TVanr": "",
    "code": "G-11-03-2A",
    "ean": "4712511825411",
    "marke": "fox",
    "bez2": "jersey L",
    "menge": "1",
    "ve": "St\u00fcck",
    "Dimensionstext": "blue\r\n",
    "Langtext": ""
  },

I want to show the values in a table that looks like this for example

Pos | code | bez | anr | qty | ve

I want it to show me first position of the array first only, which will be equal to 15800175, right? Then when i press the 'next' button it should switch divs, hide the first position and show me the values of the second position.

How do I do this with one button press to show me the according values? Really stuck on this. Thanks!

Answer 1

In javascript, afaik, there's a distinction between an 'array' and what you have there, which we'd call an 'object'. In PHP, I suppose they're both called 'array's, and when you have keys for the array values, it's referred to as an 'associative array', but in Javascript we call those 'objects' to distinguish them from arrays that look like [1,2,3]

So the first step is to actually turn your object into an array. I would do something like this:

var obj = {
  "15800175": {
    "posID": "159469",
    "scanID": "22597",
    "anr": "15800175",
    "TVanr": "",
    "code": "G-09-27-2E",
    "ean": "4710069680575",
    "marke": "fox",
    "bez": "jersey yellow",
    "bez2": "size xl",
    "menge": "1",
    "ve": "St\u00fcck",
    "Dimensionstext": "TT9857BG\r\n",
    "Langtext": ""
  },
  "15100027": {
    "posID": "159471",
    "scanID": "22597",
    "anr": "15100027",
    "TVanr": "",
    "code": "G-11-03-2A",
    "ean": "4712511825411",
    "marke": "fox",
    "bez2": "jersey L",
    "menge": "1",
    "ve": "St\u00fcck",
    "Dimensionstext": "blue\r\n",
    "Langtext": ""
  }
}

var arr = Object.keys(obj).map(key => obj[key]);

Which ends up with arr looking like:

[{"posID":"159471","scanID":"22597","anr":"15100027","TVanr":"","code":"G-11-03-2A","ean":"4712511825411","marke":"fox","bez2":"jersey L","menge":"1","ve":"Stück","Dimensionstext":"blue\r\n","Langtext":""},{"posID":"159469","scanID":"22597","anr":"15800175","TVanr":"","code":"G-09-27-2E","ean":"4710069680575","marke":"fox","bez":"jersey yellow","bez2":"size xl","menge":"1","ve":"Stück","Dimensionstext":"TT9857BG\r\n","Langtext":""}]

Then, you can iterate over each object in arr with a forEach callback, arr.forEach(item => {}); and render them however you please.

Answer 2

Hi using @Tkol approach here is a solution to append the elements 1 by 1 to your html Table;

html:

 var obj = { "15800175": { "posID": "159469", "scanID": "22597", "anr": "15800175", "TVanr": "", "code": "G-09-27-2E", "ean": "4710069680575", "marke": "fox", "bez": "jersey yellow", "bez2": "size xl", "menge": "1", "ve": "St\ück", "Dimensionstext": "TT9857BG\\r\\n", "Langtext": "" }, "15100027": { "posID": "159471", "scanID": "22597", "anr": "15100027", "TVanr": "", "code": "G-11-03-2A", "ean": "4712511825411", "marke": "fox", "bez2": "jersey L", "menge": "1", "ve": "St\ück", "Dimensionstext": "blue\\r\\n", "Langtext": "" } } var counter = 0; var arr = Object.keys(obj).map(key => obj[key]); document.getElementById("btnAdd").onclick = function(event){ //variables let tbody = document.getElementById("tbodyExample"); //logic let element = arr[counter] != undefined ? arr[counter] : undefined; if(element !== undefined){ var row = document.createElement('tr');//'<tr id="'+element.posID+'"></tr>'; row.setAttribute("id",element.posID); row.innerHTML = '<td>'+element.posID+'</td><td>'+element.code+'</td><td>'+(element.bez == undefined? element.bez2 : element.bez)+'</td><td>'+element.anr+'</td><td>'+element.menge+'</td><td>'+element.ve+'</td>'; tbody.appendChild(row); counter++; }else{ alert("No more items found"); } } 

 <h2>Table example</h2> <table id="example" border=1> <thead> <th>Post</th> <th>code</th> <th>bez</th> <th>anr</th> <th>qty</th> <th>ve</th> </thead> <tbody id="tbodyExample"> </tbody> </table> <br> <input type="button" id="btnAdd" value="add Row"> 

Hope it helps