Utilization of an association in JS and HTML



  • I'm trying to get the pieces on the page, but I'm getting the text instead. undefined

    var answers = [{
      "answer_name": "Ария Старк",
      "strong": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    }, {
      "answer_name": "Джейме Ланнистер",
      "strong": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    }];
    

    for (var ans in answers) {
    var objTo = document.getElementById("strongs");

    var newAnswer = document.createElement('div');
    newAnswer.className = "answer col-xs-6 col-sm-4 col-lg-3";
    newAnswer.innerHTML = "<div href='#' class='thumbnail'> <h5 class='answer-name'>" + ans.answer_name + "</h5><p class='answer-text'>" + ans.answer_name + "</div>";
    objTo.appendChild(newAnswer);
    }

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <div class="row answers" id="strongs">
    </div>



  • The thing is, for...in, reversing the properties of the object, the code will be fulfilled for each characteristic. Example.

    var a = {
      p1: 1,
      p2: 2
    }
    for(var p in a) {
      alert(p) // p1, затем p2
    

    // к значению каждого свойства прибавить 1
    a[p] = a[p] + 1
    }

    In your case ans 0, 1, etc. Accordingly ans.answer_name It looks real. 0.answer_name1.answer_name etc.

    You're gonna have to make a move or something. for:

    for (var i = 0; i < answers.length; ++i)

    Or write like this:

    answers[ans].answer_name

    Either foreach (what I think you were trying to do):

    answers.forEach(function(item) {
    var objTo = document.getElementById("strongs");

    var newAnswer = document.createElement('div');
    newAnswer.className = "answer col-xs-6 col-sm-4 col-lg-3";
    newAnswer.innerHTML = "<div href='#' class='thumbnail'> <h5 class='answer-name'>" + item.answer_name + "</h5><p class='answer-text'>" + item.answer_name + "</div>";
    objTo.appendChild(newAnswer);
    });




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2