Displaying Object properties

Question

I want to display the Object properties (Label, Icon, Href) from a randomly chosen object from the array. How should I go about this, This is what I have so far.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
  var myArray = [{
    label: "Pears",
    icon: "Pears.png",
    href: "./Pears"
  }, {
    label: "Appels",
    icon: "Appels.png",
    href: "./Appels"
  }, {
    label: "Mango",
    icon: "Mango.png",
    href: "./Mango"
  }, ];

  var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem3 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem4 = myArray[Math.floor(Math.random()*myArray.length)];

  document.addEventListener("DOMContentLoaded", function(event) {

    document.getElementById("randomItem1").innerHTML = randomItem1;
    document.getElementById("randomItem2").innerHTML = randomItem2;
    document.getElementById("randomItem3").innerHTML = randomItem3;
    document.getElementById("randomItem4").innerHTML = randomItem4;      

  });
</script>
<p>Random 1</p>
    <div id = "randomItem1"> </div>
    <!--Label value-->
    <!--Icon value-->
    <!--Href value-->
<p>Random 2</p>
    <div id = "randomItem2"> </div>
<p>Random 3</p>
    <div id = "randomItem3"> </div>
<p>Random 4</p>
    <div id = "randomItem4"> </div>
</body>
</html>

Possible duplicate of Display JavaScript Object in HTML

Heretic Monkey
– Heretic Monkey

2018-07-07 23:05:17 +00:00
Commented Jul 7, 2018 at 23:05 — Heretic Monkey
– Heretic Monkey, Commented Jul 7, 2018 at 23:05
innerHTML = Object.values(randomItem1).join()

Taki
– Taki

2018-07-07 23:07:12 +00:00
Commented Jul 7, 2018 at 23:07 — Taki
– Taki, Commented Jul 7, 2018 at 23:07

Asons · Accepted Answer · 2018-07-07 23:16:25Z

Just use their object key, e.g.

randomItem1.label
randomItem1.icon
randomItem1.href

Stack snippet

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
  var myArray = [{
    label: "Pears",
    icon: "Pears.png",
    href: "./Pears"
  }, {
    label: "Appels",
    icon: "Appels.png",
    href: "./Appels"
  }, {
    label: "Mango",
    icon: "Mango.png",
    href: "./Mango"
  }, ];

  var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem3 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem4 = myArray[Math.floor(Math.random()*myArray.length)];

  document.addEventListener("DOMContentLoaded", function(event) {

    // grabbed all keys in this first assignment to show how-to
    document.getElementById("randomItem1").innerHTML = randomItem1.label + " : " +
                                                       randomItem1.icon + " : " +
                                                       randomItem1.href;

    document.getElementById("randomItem2").innerHTML = randomItem2.label;
    document.getElementById("randomItem3").innerHTML = randomItem3.label;
    document.getElementById("randomItem4").innerHTML = randomItem4.label;      

  });
</script>
<p>Random 1</p>
    <div id = "randomItem1"> </div>
    <!--Label value-->
    <!--Icon value-->
    <!--Href value-->
<p>Random 2</p>
    <div id = "randomItem2"> </div>
<p>Random 3</p>
    <div id = "randomItem3"> </div>
<p>Random 4</p>
    <div id = "randomItem4"> </div>
</body>
</html>

Collectives™ on Stack Overflow

Displaying Object properties

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related