Цикл по данным от JSON не дает ожидаемого результата

Question

Я перебираю некоторые данные в JSON (https://s3-us-west-2.amazonaws.com/s.cdpn.io/612528/data.json) и добавляю их в свой собственный <div> в качестве innerText для этого примера.

Я не могу получить результат, на который надеюсь. Я могу отделить каждую «TAB» (как вы можете видеть из TAB1, TAB2, TAB3) и могу разделить каждую «строку», но последний бит данных повторяется несколько раз. Я попытался переместить функцию createCanvas за пределы определенных циклов и внутри других. Я пытался разделить данные по-другому, как и некоторые другие вопросы о переполнении стека, но теперь я в замешательстве.

Я уверен, что это основа c, но я чувствую, что не вижу леса теперь для деревьев.

(ключи не соответствуют их значению, поскольку JSON - это преобразованный файл Excel * c)

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