Jump to content

.London Domains - £4
Photo

Cannot display JSON in HTML using JavaScript

JavaScript JSON Developer HTML

  • Please log in to reply
No replies to this topic

#1 MichaelChad

MichaelChad
  • Member
  • Newbie
  • 1 posts

Posted 30 July 2019 - 20:17

So I've got this JSON file (attached). I cannot get it to display in HTML when I call the function in JavaScript. Can anyone help?

const data = {
    "layers": [{
            "order": 0,
            "items": [{
                    "order": 2,
                    "name": "Randomly Generous Red",
                    "imgSrc": "jeb.png"
                },

                {
                    "order": 1,
                    "name": "Too Agreeable Silver",
                    "imgSrc": "VRC.png"
                },

                {
                    "order": 3,
                    "name": "Almost Whispy Blue",
                    "imgSrc": "58Z.png"
                },

                {
                    "order": 0,
                    "name": "Some Times Juicy Red",
                    "imgSrc": "081.png"
                }
            ]
        },

        {
            "order": 1,
            "items": [{
                    "order": 0,
                    "name": "Never Substantial Silver",
                    "imgSrc": "BWK.jpg"
                },

                {
                    "order": 1,
                    "name": "Really Adorable Pink",
                    "imgSrc": "hk9.jpg"
                }
            ]
        },

        {
            "order": 2,
            "items": [{
                    "order": 2,
                    "name": "Very Honest Black",
                    "imgSrc": "0Og.png"
                },

                {
                    "order": 4,
                    "name": "Never Eager Red",
                    "imgSrc": "2Ks.png"
                },

                {
                    "order": 0,
                    "name": "Kind Of Adorable Silver",
                    "imgSrc": "L99.png"
                },

                {
                    "order": 3,
                    "name": "Some Times Confident Pink",
                    "imgSrc": "Wx4.png"
                },

                {
                    "order": 1,
                    "name": "Never Brave Blue",
                    "imgSrc": "020.png"
                }
            ]
        }
    ],
    "default_configuration": [
        0,
        1,
        4
    ]
};


const sorted = {
  'layers': data.layers
                .sort(({ order: a }, { order: b}) => a - b)
                .map(o => { 
                  o.items.sort(({ order: a }, { order: b}) => a - b);
                  return o;
                }),
  'default_configuration': data.default_configuration
};

console.log(sorted);

I've tried using this JavaScript to solve the issue:

<script>

fetch('order-sequence.json')
  .then(function (response) {
    return response.json();
  })
.then(fucntion(data) {
      appendData(data);
    })
  .catch(function (err) {
      console.log(err);
  });
    
function appendData(data) {
  var mainContainer = document.getElementById("myData");
  for (var i = 0; i < data.length; i++) {
    var div = document.createElement("div");
    div.innerHTML = 'Name: ' + data[i].order + ' ' + data[i].name;
    mainContainer.appendChild(div);
  }
}

</script>

  • 0





Also tagged with one or more of these keywords: JavaScript, JSON, Developer, HTML

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users