CODEWITHSUNDEEP
javascriptarraysobject
Albenis Kërqeli
Albenis Kërqeli

Reputation: 130

Javascript object value problem undefined

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>

Upvotes: 0

Views: 28

Answers (1)

Rahul juneja - DevOps
Rahul juneja - DevOps

Reputation: 790

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>

Upvotes: 1

Related Questions