JSON循环数组，用于使用JQuery将数据插入到tr td [英] JSON loop array for inserting data into tr td using JQuery

问题描述

我无法将数据处理到表中.

我尝试过，但是遇到了困难. 我从上一个问题 上一个答案 中引用了一个参考，但是它没有用./p>

我想在垂直显示中插入数据，如下所示: 键一次用作标签(标题).

我的剧本:

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);

解决方案

我不确定我是否正确理解您想要的内容，因为您的图像不太清楚.我假设您想在一个垂直行中显示每个条目，并且您想在开头添加一个标题.为此，我映射了数据，因此使用起来更容易.运行代码段时，您可以将映射视为控制台输出.

 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> 

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);

解决方案

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>

这篇关于JSON循环数组，用于使用JQuery将数据插入到tr td的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！