循环来自 JSON 的数据没有给出预期的结果

Question

我正在循环访问 JSON (https://s3-us-west-2.amazonaws.com/s.cdpn.io/612528/data.json) 中的一些数据，并将其添加到它自己的 <div> 中，作为本示例的 innerText。

我无法得到我希望的结果。我可以分隔每个“TAB”（从 TAB1、TAB2、TAB3 可以看到），我可以分隔每个“行”，但最后一位数据重复多次。我尝试将 createCanvas 函数移到某些循环之外和其他循环内部。我已经尝试按照堆栈溢出的其他一些 Q 以不同的方式拆分数据，但现在我很难过。

我确定这是基本的，但我觉得我现在只见树木不见森林。

（它们的键与它们的值不匹配，因为 JSON 是转换后的 Excel 文档）

我的 JS 是：

const createCanvas = (canvasID, intro, promo, outro, line1) => {
  var passedCanvasID = canvasID
  var myCanvas = document.createElement("div");
  myCanvas.id = passedCanvasID;
  document.body.appendChild(myCanvas);

  myCanvas.innerText = canvasID + ": " + intro + " -- " + promo + " -- " + outro
}

document.getElementById("get_the_file").addEventListener("change", function() {

  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    var sheet = JSON.parse(content); // Array of Objects.

    for(var tab in sheet) {
      var tabName = tab
      var tab = sheet[tab]

      for(var row in tab) {
        var rowName = row
        var row = tab[row]

        for(var item in row) {
          var copy = row[item]

          //Feed data into createCanvas
          createCanvas(tabName, row[item], row[item], row[item], row[item])
        }
      }
    }
  };
  fileread.readAsText(file_to_read);
});

我希望达到的结果是：

TAB1: Intro -- UK Sale. Starts. Now -- UK Up To 75% Off -- UK SHOP NOW
TAB1: Promo -- IE Sale. Starts. Now -- IE Up To 75% OffIE -- IE SHOP NOWIE
TAB1: Outro -- DE Sale. Startet. Jetzt -- DE Bis Zu 75% Rabatt
-- DE JETZT BESTELLEN
TAB2: Intro -- UK Second tab -- UK Up To 75% Off -- UK SHOP NOW
TAB2: Promo -- IE Second tabIE -- IE Up To 75% OffIE -- IE SHOP NOWIE
TAB2: Outro -- DE Second tabDE -- DE Bis Zu 75% Rabatt
-- DE JETZT BESTELLEN
TAB3: Intro -- UK Third tab -- UK Up To 75% Off -- UK SHOP NOW
TAB3: Promo -- IE Third tabIE -- IE Up To 75% OffIE -- IE SHOP NOWIE
TAB3: Outro -- DE Third tabDE -- DE Bis Zu 75% Rabatt -- DE JETZT BESTELLEN

但我得到这样的结果：

TAB1: Intro -- Intro -- Intro
TAB1: UK Sale. Starts. Now -- UK Sale. Starts. Now -- UK Sale. Starts. Now
TAB1: IE Sale. Starts. Now -- IE Sale. Starts. Now -- IE Sale. Starts. Now
TAB1: DE Sale. Startet. Jetzt -- DE Sale. Startet. Jetzt -- DE Sale. Startet. Jetzt
TAB1: Promo -- Promo -- Promo
TAB1: UK Up To 75% Off -- UK Up To 75% Off -- UK Up To 75% Off
TAB1: IE Up To 75% OffIE -- IE Up To 75% OffIE -- IE Up To 75% OffIE
TAB1: DE Bis Zu 75% Rabatt -- DE Bis Zu 75% Rabatt -- DE Bis Zu 75% Rabatt
TAB1: Outro -- Outro -- Outro
TAB1: UK SHOP NOW -- UK SHOP NOW -- UK SHOP NOW
TAB1: IE SHOP NOW -- IE SHOP NOW -- IE SHOP NOW
TAB1: DE JETZT BESTELLEN -- DE JETZT BESTELLEN -- DE JETZT BESTELLEN
TAB2: Intro -- Intro -- Intro
TAB2: UK Second tab -- UK Second tab -- UK Second tab
TAB2: IE Second tabIE -- IE Second tabIE -- IE Second tabIE
TAB2: DE Second tabDE -- DE Second tabDE -- DE Second tabDE
TAB2: Promo -- Promo -- Promo
TAB2: UK Up To 75% Off -- UK Up To 75% Off -- UK Up To 75% Off
TAB2: IE Up To 75% OffIE -- IE Up To 75% OffIE -- IE Up To 75% OffIE
TAB2: DE Bis Zu 75% Rabatt -- DE Bis Zu 75% Rabatt -- DE Bis Zu 75% Rabatt
TAB2: Outro -- Outro -- Outro
TAB2: UK SHOP NOW -- UK SHOP NOW -- UK SHOP NOW
TAB2: IE SHOP NOWIE -- IE SHOP NOWIE -- IE SHOP NOWIE
TAB2: DE JETZT BESTELLEN -- DE JETZT BESTELLEN -- DE JETZT BESTELLEN
TAB3: Intro -- Intro -- Intro
TAB3: UK Third tab -- UK Third tab -- UK Third tab
TAB3: IE Third tabIE -- IE Third tabIE -- IE Third tabIE
TAB3: DE Third tabDE -- DE Third tabDE -- DE Third tabDE
TAB3: Promo -- Promo -- Promo
TAB3: UK Up To 75% Off -- UK Up To 75% Off -- UK Up To 75% Off
TAB3: IE Up To 75% OffIE -- IE Up To 75% OffIE -- IE Up To 75% OffIE
TAB3: DE Bis Zu 75% Rabatt -- DE Bis Zu 75% Rabatt -- DE Bis Zu 75% Rabatt
TAB3: Outro -- Outro -- Outro
TAB3: UK SHOP NOW -- UK SHOP NOW -- UK SHOP NOW
TAB3: IE SHOP NOWIE -- IE SHOP NOWIE -- IE SHOP NOWIE
TAB3: DE JETZT BESTELLEN -- DE JETZT BESTELLEN -- DE JETZT BESTELLEN

Answer 1

这是你想要做的吗？

const content = `{
    "TAB1": [
        {
            "Country": "Intro",
            "UK": "Sale. Starts. Now",
            "IE ": "Sale. Starts. Now",
            "DE": "Sale. Startet. Jetzt"
        },
        {
            "Country": "Promo",
            "UK": "Up To 75% Off",
            "IE ": "Up To 75% Off",
            "DE": "Bis Zu 75% Rabatt"
        },
        {
            "Country": "Outro",
            "UK": "SHOP NOW ",
            "IE ": "SHOP NOW ",
            "DE": "JETZT BESTELLEN   "
        }
    ],
    "TAB2": [
        {
            "Country": "Intro",
            "UK": "Second tab",
            "IE ": "Second tabIE",
            "DE": "Second tabDE"
        },
        {
            "Country": "Promo",
            "UK": "Up To 75% Off",
            "IE ": "Up To 75% Off",
            "DE": "Bis Zu 75% Rabatt"
        },
        {
            "Country": "Outro",
            "UK": "SHOP NOW ",
            "IE ": "SHOP NOW ",
            "DE": "JETZT BESTELLEN   "
        }
    ],
    "TAB3": [
        {
            "Country": "Intro",
            "UK": "Third tab",
            "IE ": "Third tabIE",
            "DE": "Third tabDE"
        },
        {
            "Country": "Promo",
            "UK": "Up To 75% Off",
            "IE ": "Up To 75% Off",
            "DE": "Bis Zu 75% Rabatt"
        },
        {
            "Country": "Outro",
            "UK": "SHOP NOW ",
            "IE ": "SHOP NOW ",
            "DE": "JETZT BESTELLEN   "
        }
    ]
}`;

const createCanvas = (text) => {
  const myCanvas = document.createElement("div");
  document.body.appendChild(myCanvas);
  myCanvas.innerText = text;
}

const sheet = JSON.parse(content); // Object with arrays for values

for (const tabName in sheet) {
  const tab = sheet[tabName]; // this is an array
  const tabRowTypes = tab.map(arrayItem => arrayItem['Country']);
  const languageCodes = Object.keys(tab[0]).filter(key => key !== 'Country');
  // console.log(tabName, 'has', ...tabRowTypes, 'in languages', ...languageCodes);
  for (const languageCode of languageCodes) {
    let result = tabName + ': ' + languageCode; // 'TAB1: UK'
    for (const type of tabRowTypes) {
      result += ' -- (' + type + ') '; // ' -- (Intro) '
      const typeItem = tab.find(arrayItem => arrayItem['Country'] === type);
      result += typeItem[languageCode]; // 'Sale. Starts. Now'
    };
    createCanvas(result);
  };
}