Javascript object value problem undefined

Question

Hello Developers i have a problem with object properties in javascript , i put some objects in arrays , but i cannot get the values from that array, it says only undefined Any solution for this ? I tried some methods here , but not worked
Thanks so much i f any helps me for this

const quiz = [
  {
  q1: "Where Are You",
  ans1 : "Alaska",
    ans2: "Alabama",
  } ,
  {
    q1: "Where Are You",
    ans1: "Alaska",
    ans2: "Alabama",
  }

  
]
console.log(quiz.q1);

let loadquiz = document.querySelector(".quiz");

let  span =document.querySelector("span");

span.innerText = quiz.q1;

body {
  background-color: #141C35;
  padding: 0;
  margin: 0;
  display: flex;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  color: white;
  justify-content: center;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}




/*  #212134*/

.quiz {
  background-color:#4259FA;
  width: 500px;
  color: white;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:50px 0;
  justify-content: center;
}
.quiz h2 {
  padding: 10px;
}

.quiz span {
  padding: 15px;
  margin: 5px;
}

<body>
    <h1>Quiz App</h1>
<div class="quiz">
<h2>  Where do you live ?</h2>
<span>Question goes here</span>
<span>Question goes here</span>
<span>Question goes here</span>
</div>
</body>

Rahul juneja - DevOps · Accepted Answer · 2020-11-05 16:30:01Z

1

You have a list (e.g [] ) of objects (e.g. {}) , to access any key of the object you must first go to the index of that object

const quiz = [
  {
  q1: "Where Are You",
  ans1 : "Alaska",
    ans2: "Alabama",
  } ,
  {
    q1: "Where Are You",
    ans1: "Alaska",
    ans2: "Alabama",
  }

  
]
console.log(quiz[0].q1);

let loadquiz = document.querySelector(".quiz");

let  span =document.querySelector("span");

span.innerText = quiz[0].q1;

body {
  background-color: #141C35;
  padding: 0;
  margin: 0;
  display: flex;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  color: white;
  justify-content: center;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}




/*  #212134*/

.quiz {
  background-color:#4259FA;
  width: 500px;
  color: white;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:50px 0;
  justify-content: center;
}
.quiz h2 {
  padding: 10px;
}

.quiz span {
  padding: 15px;
  margin: 5px;
}

<body>
    <h1>Quiz App</h1>
<div class="quiz">
<h2>  Where do you live ?</h2>
<span>Question goes here</span>
<span>Question goes here</span>
<span>Question goes here</span>
</div>
</body>

answered Nov 5, 2020 at 16:30

Rahul juneja - DevOps

7905 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Albenis Kërqeli Over a year ago

oh i forgot this rule, btw thanks for much for this solution

Collectives™ on Stack Overflow

Javascript object value problem undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related