CODEWITHSUNDEEP
javascripthtmlcssvue.jsvuejs2
DIIMIIM
DIIMIIM

Reputation: 599

How to read data from a FOR loop inside DIV elements

Considering the next code:

HTML GENERATED:

            <!DOCTYPE html>
            <html lang="en">

            <head>
                  <meta charset="utf-8">
                <title>Website TEST</title>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <meta name="description" content="">
                <link rel="stylesheet"                 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
            </head>

            <body>

              <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
              <a class="navbar-brand" href="#">Ww1</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarWw1" aria-controls="navbarWw1" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>

                              <div class="collapse navbar-collapse" id="navbarWw1">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                  <li class="nav-item active">
                    <a class="nav-link" href="/">Home <span class="sr-only">(current)                </span>                </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="map">Map</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="about">About</a>
                  </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                  <input class="form-control mr-sm-2" id="myInput" type="search" onkeyup="myFunction()"  placeholder="Find your next memories!">
                </form>
                              </div>
                            </nav>

              <div class="container-fluid" id="networdapp"                 style="display:none;">
                 <div class="row" >
                    <div v-for="result in results" class="col-sm-6" >
                      <div class="card m-3 h-240  bg-light" >
         <div class="card-header text-center" > {{ result.title }} </div>
           <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info"                 onclick="getData();">Details</a>
             </div>
         </div>
                      </div>
                  </div>
            </div>
              </body>

              <script src="https://unpkg.com/vue"></script>
              <script src="https://unpkg.com/axios/dist/axios.min.js">                </script>

              <script>

            function myFunction() {
                var input , filter , OK = false ;
                input = document.getElementById("myInput");
                filter = input.value.toUpperCase();
            if(filter.length > 0 ) {
            document.getElementById("networdapp").style.display = "";
            $( ".col-sm-6" ).each(function( index ) {
            if ($(this).text().toUpperCase().indexOf(filter) > -1){
            this.style.display="";
            }else{
            this.style.display="none";
            }
            });
            }
            else{
            document.getElementById("networdapp").style.display = "none";
            }
            }


              </script>

              <script type="text/javascript">
              const vm = new Vue({
                el: '#networdapp',
                data: {
                  results:[]
                 },
                 mounted() {
                   axios.get('/getJson')
                 .then(response => {
                    this.results = response.data;
                 })
                 .catch( e => {
                   console.log(e);
                 });
                }
              });

            function getData() {
            window.alert($(this).parents("#networdapp").find(".card-header.text-center").text());
            window.alert(console.log( $(this).closest(".row").find(".card-header.text-center").html() ));
            }

              </script>

            </html>

And there is my code snippet(I'm using EJS):

             <!DOCTYPE html>
             <html lang="en">

             <head>
               <%- include('head'); -%>
             </head>

             <body>

               <%- include('navbar'); -%>

               <div class="container-fluid" id="networdapp" style="display:none;">
                  <div class="row" >
                     <div v-for="result in results" class="col-sm-6" >
                       <div class="card m-3 h-240  bg-light" >
                          <div class="card-header text-center" > {{ result.title }} </div>
                            <div class="card-body" style="height:200px" >
             <p class="card-text" v-html="result.prevDesc"></p>
           </div>
             <div class="card-footer bg-transparent border-info">
               <a href="/details" class="btn btn-info" onclick="getData();">Details</a>
                              </div>
                          </div>
                       </div>
                   </div>
             </div>
               </body>


               <%- include('scripts') -%>

               <script type="text/javascript">
               const vm = new Vue({
                 el: '#networdapp',
                 data: {
                   results:[]
                  },
                  mounted() {
                    axios.get('/getJson')
                  .then(response => {
                     this.results = response.data;
                  })
                  .catch( e => {
                    console.log(e);
                  });
                 }
               });

             function getData() {
             window.alert($(this).parents("#networdapp").find(".card-header.text-center").text());
             window.alert(console.log( $(this).closest(".row").find(".card-header.text-center").html() ));
             }

               </script>

             </html>

What I want to do: The within the <div class="container-fluid" id="networdapp"> will be executed the <div v-for="result in results" class="col-sm-6" > let'say for n times and what I want is : I want to click on the "Details" button of a random generated <div v-for="result in results" class="col-sm-6" > and get the data from {{ result.title }} (from the <div class="card-header text-center"> ) and store it into a variable and then use it for another x.ejs page.The point is all I've done till this moment was to read all the content of all divs or....to get undefined just like what will show the 2x window.alert code lines from the code snippet(actually the second one.the first won't show anything).And that's pretty much my problem...I can't read the data from a {{result.title}} from a random div generated by this v-for from <div v-for="result in results" class="col-sm-6" >.I've been trying a lot of things with JQuery to solve this problem but can't figure out what I'm doing wrong.

I'm using EJS,Vue.JS, a bit of JQuery (my tries to read data), and some other libraries like Axios.

Thank you in advance!

Upvotes: 2

Views: 383

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Since you're using Vue.js you don't need onclick, you could replace it by @click and pass your result and $event like parameters :

...
<a href="/details" class="btn btn-info" @click="getData(result,$event)">Details</a> 
...

and inside your methods call that function as follow :

const vm = new Vue({
  el: '#networdapp',
  data: {
    results:[]
  },
  methods:{
    getData: function(result, event) {
      // and do whatever you want with that result and event like
      console.log(event.target.outerHTML);
      // here your target is a anchor element (<a></a>) which you can access its attributes ..       
     }
   }
   ...
 }

also you can delete that function getData(){...}

Upvotes: 2

Related Questions