CODEWITHSUNDEEP
javascriptjsonfor-loop
GoldenGonaz
GoldenGonaz

Reputation: 1166

Looping over data from JSON not giving expected result

I am looping over some data in a JSON (https://s3-us-west-2.amazonaws.com/s.cdpn.io/612528/data.json) and adding it into it's own <div> as innerText for this example.

I am unable to get the result I'm hoping for. I can separate each "TAB" (as you can see from TAB1, TAB2, TAB3) and I can separate each "row" but the final bit of data repeats multiple times. I have tried moving the createCanvas function outside of certain loops and inside others. I've tried splitting the data differently as per some other Qs on Stack overflow, but now I am stumped.

I'm sure it's basic, but I feel like I can't see the forest for the trees now.

(They keys don't match their value as the JSON is a converted Excel doc)

My JS is:

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

The result I'm looking to achieve is:

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

But I am getting results like this:

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

Upvotes: 1

Views: 57

Answers (1)

Stratubas
Stratubas

Reputation: 3067

Is this what you're trying to do?

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

Upvotes: 2

Related Questions