Why can't I iterate a JSON to return both objects and array strings with jquery and "for i-CodePudding

I am receiving a JSON file from our SAP ERP system containing work order information. This comes from a REST http endpoint. This smaller version example appears as (the array sizes will be different every time) ..

{
  "SeqNo": [
    "000000",
    "000000"
  ],
  "OpNo": [
    "0100",
    "0200"
  ],
  "OpDesc": [
    "ASSEMBLE, PER DBI & DRAWING",
    "FINAL INSPECT PER DBI & DWG"
  ],
  "WorkCent": [
    "8000",
    "7000"
  ],
  "WorkCentText": [
    "ASSEMBLY (SURFACE)",
    "QC INSPECTIONS"
  ]
}

I need to run through this and pull the header objects and each array item. My overall intention is to present the machine operator with a choice in the format -

"SeqNo: 00000, OpNo:0100, OpDesc: ASSEMBLE, PER DBI & DRAWING, WorkCent: 8000, WorkCentText: ASSEMBLY (SURFACE)"
"SeqNo: 00000, OpNo:0200, OpDesc: FINAL INSPECT PER DBI & DWG, WorkCent: 7000, WorkCentText: QC INSPECTIONS"

This will appear in a web page built on Bootstrap and JS. From their selection this will send work order data to Middleware and SCADA, via OPC Router.

Using jquery I can iterate and grab the objects; "SeqNo", "OpNo", etc. But each subsequent array appears as a string of the full array, "000000, 000000". So, inside the original jquery iteration using "for" or "for in" I return every single character; "S", "e", "q", etc?? I have tried stringify and parse to change the JSON format but I can not pull the data I need.

function checkId() {


  var sapexport = {
    "SeqNo": ["000000", "000000"],
    "OpNo": ["0100", "0200"],
    "OpDesc": ["ASSEMBLE, PER DBI & DRAWING", "FINAL INSPECT PER DBI & DWG"],
    "WorkCent": ["8000", "7000"],
    "WorkCentText": ["ASSEMBLY (SURFACE)", "QC INSPECTIONS"]
  }


  // JSON to string and back
  var mystring = JSON.stringify(sapexport)
  var mydata = JSON.parse(mystring)

  $.each(mydata, function (index, value) {
    //alert("Index = "   index   ", Array =  "   value);   // returns json array header names but full array

    // So from the start of this jquery we iterate the JSON objects from SAP
    // We now can show the full array values below, but still need to iterate individually
    // but they are not objects they are arrays and jquery will not return


//still returns full string
    $.each(mydata, function() {
      var h = this;
      alert(h.toString());
    });


  }) //initial jquery end

} //function checkid end

Chopping up the data to make the strings will be easy if I could return the objects and array individual values that I need.

Any help would be appreciated before I go insane.

CodePudding user response：

If I understand your goal correctly, here is the solution with vanila js:

const sapexport = {"SeqNo": ["000000", "000000"],"OpNo": ["0100", "0200"],"OpDesc": ["ASSEMBLE, PER DBI & DRAWING", "FINAL INSPECT PER DBI & DWG"],"WorkCent": ["8000", "7000"],"WorkCentText": ["ASSEMBLY (SURFACE)", "QC INSPECTIONS"]};
  
  
const groups = Object.entries(sapexport).reduce((acc, [key, values]) => {
  values.forEach((value, index) => {
    acc[index] ??= [];  
    acc[index].push(`${key}: ${value}`);
  });

  return acc;
}, {});

const result = Object.values(groups).map((group) => group.join(', '));

console.log(result);

// [ "SeqNo: 000000, OpNo: 0100, OpDesc: ASSEMBLE, PER DBI & DRAWING, WorkCent: 8000, WorkCentText: ASSEMBLY (SURFACE)",
//   "SeqNo: 000000, OpNo: 0200, OpDesc: FINAL INSPECT PER DBI & DWG, WorkCent: 7000, WorkCentText: QC INSPECTIONS"]

.as-console-wrapper { max-height: 100% !important; top: 0 }