JSON loop array for inserting data into tr td using JQuery

Question

I'm having trouble processing data into tables.

I tried, but experienced difficulties. I took a reference from the previous question Previous Answer, but it hasn't worked.

I want to insert data in a vertical display, as shown: key is used once as a label (title).

my script:

var data = [{
  "Camera Dual" : "48 MP",
  "Camera Features" : "Dual-LED flash",
  "Camera Video" : "2160p@30fps",
  "Selfie camera Single" : "Motorized pop-up 16 MP",
  "Selfie camera Features" : "HDR",
  "Selfie camera Video" : "1080p@30fps",
},{
  "Camera Dual" : "26mm (wide)",
  "Camera Features" : "HDR, panorama",
  "Camera Video" : "1080p@30/60/120fps, gyro-EIS",
  "Selfie camera Single" : "f/2.0, 26mm (wide)",
  "Selfie camera Features" : "HDR",
  "Selfie camera Video" : "1080p@30fps",
},{
  "Camera Dual" : "1/2.0", 0.8µm, PDAF",
  "Camera Features" : "Dual-LED flash, HDR",
  "Camera Video" : "2160p@30fps, 1080p@30/60/120fps",
  "Selfie camera Single" : "Motorized pop-up 16 MP",
  "Selfie camera Features" : "HDR",
  "Selfie camera Video" : "1080p@30fps",
}]

(function($) {
  var tbody = $("<tbody />"),tr;
  $.each(data,function(_,obj) {
      tr = $("<tr />");
      $.each(obj,function(_,text) {
        tr.append("<td>"+text+"</td>")
      });
      tr.appendTo(tbody);
  });
  tbody.appendTo("#tableComp");
})(jQuery);

Paul · Accepted Answer · 2020-05-23 21:09:44Z

I'm not sure if I understand correctly, what you want, because your image is not very clear about it. I assume you want to show each entry in one vertical row and that you want to have a title at the beginning. To do so, I mapped the data, so it's easier to use it. You can see the mapping as console output, when running the snippet.

let data = [{
  "Camera Dual": "48 MP",
  "Camera Features": "Dual-LED flash",
  "Camera Video": "2160p@30fps",
  "Selfie camera Single": "Motorized pop-up 16 MP",
  "Selfie camera Features": "HDR",
  "Selfie camera Video": "1080p@30fps",
}, {
  "Camera Dual": "26mm (wide)",
  "Camera Features": "HDR, panorama",
  "Camera Video": "1080p@30/60/120fps, gyro-EIS",
  "Selfie camera Single": "f/2.0, 26mm (wide)",
  "Selfie camera Features": "HDR",
  "Selfie camera Video": "1080p@30fps",
}, {
  "Camera Dual": "1/2.0, 0.8µm, PDAF",
  "Camera Features": "Dual-LED flash, HDR",
  "Camera Video": "2160p@30fps, 1080p@30/60/120fps",
  "Selfie camera Single": "Motorized pop-up 16 MP",
  "Selfie camera Features": "HDR",
  "Selfie camera Video": "1080p@30fps",
}]

let tbody = $("<tbody />");
let mappedData = data.reduce((acc, val) => {
  Object.keys(val).forEach((key) => {
    // use the existing array or create a new one and append the value.
    // use the title as key.
    acc[key] = (acc[key] || []).concat([val[key]]);
  })
  return acc;
}, {})

console.log("after napping", mappedData);

$.each(mappedData, function(key, obj) {
  let tr = $("<tr />");
  // Add the key.
  tr.append("<td>" + key + "</td>")
  $.each(obj, function(_, text) {
    // Add the values.
    tr.append("<td>" + text + "</td>")
  });
  tr.appendTo(tbody);
});
tbody.appendTo("#tableComp");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tableComp"></table>

Collectives™ on Stack Overflow

JSON loop array for inserting data into tr td using JQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related