logo
down
shadow

Loop through and display content within an object


Loop through and display content within an object

Content Index :

Loop through and display content within an object
Tag : javascript , By : avi
Date : November 28 2020, 12:01 PM

this will help Since you have jQuery already loaded, you can use $.append to add required HTML to the container using a simple template literal.
$(function() {
  const CourseData = {
    "1": {
      thumbnail: "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
      title: "Title 1",
      price: "14.95"
    },
    "2": {
      thumbnail: "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
      title: "Title 2",
      price: "19.95"
    },
    "3": {
      thumbnail: "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
      title: "Title 3",
      price: "4.95"
    }
  };


  const container = $("#cards-container");
  for (let courses in CourseData) {
    const {
      thumbnail,
      title,
      price
    } = CourseData[courses];
    const template = `<div class="card col-sm-12 col-md-6 col-lg-3">
      <div class="hover">
        <a class="figure" href="register/index.php?course=101">
          <img src="${thumbnail}" class="img-fluid card-img-top" alt="hazing prevention thumbnail">
        </a>
      </div>
      <div class="card-body">
        <a href="register/index.php?course=101" class="course-link">${title}</a>
      </div>
      <div class="card-footer">
        <p class="price mb-0">${price}</p>
      </div>
    </div>`;
    container.append(template);

  }
});
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


</head>

<body>
  <div id="dynamic"></div>
  <div id="cards-container" class="container">
  </div>


  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="course-data.js"></script>
</body>

</html>
$(function() {
  const CourseData = {
    "1": {
      thumbnail: "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
      title: "Title 1",
      price: "14.95"
    },
    "2": {
      thumbnail: "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
      title: "Title 2",
      price: "19.95"
    },
    "3": {
      thumbnail: "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
      title: "Title 3",
      price: "4.95"
    }
  };


  const container = document.getElementById("cards-container");
  for (let courses in CourseData) {
    const {
      thumbnail,
      title,
      price
    } = CourseData[courses];
    const template = `<div class="card col-sm-12 col-md-6 col-lg-3">
      <div class="hover">
        <a class="figure" href="register/index.php?course=101">
          <img src="${thumbnail}" class="img-fluid card-img-top" alt="hazing prevention thumbnail">
        </a>
      </div>
      <div class="card-body">
        <a href="register/index.php?course=101" class="course-link">${title}</a>
      </div>
      <div class="card-footer">
        <p class="price mb-0">${price}</p>
      </div>
    </div>`;
    container.innerHTML += template;

  }
});
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


</head>

<body>
  <div id="dynamic"></div>
  <div id="cards-container" class="container">
  </div>


  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="course-data.js"></script>
</body>

</html>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Display content from Database (While loop) in C# / .NET


Tag : asp.net , By : Ernie
Date : March 29 2020, 07:55 AM
Hope this helps Make sure the tag has the runat="server" attribute, for example:
<head runat="server">
Page.Title = reader["title"].ToString();

WordPress Loop Display Content if Have Posts


Tag : wordpress , By : LUK
Date : March 29 2020, 07:55 AM
like below fixes the issue
<?php if (have_posts()) : ?>
  <div>
    <?php while (have_posts()) : the_post(); ?>
      …
    <?php endwhile; ?> 
  </div>
<?php endif; ?>

Display array content from a for-loop


Tag : jquery , By : cashshadow
Date : March 29 2020, 07:55 AM
hope this fix your issue I'm trying to show one number from randomTable for 8sec, 1by1. Sadly it's doesnt show anything at all. , It's not exactly clear what your intention is, but maybe this helps:
var numberTable = [];
var randomTable = [];
for (var i = 1; i <= 32; i++) {
  numberTable.push(i);
}
for (var i = 0; i < 8; i++) {
  randomTable.push(1 + Math.floor(Math.random() * (32 - i)));
  numberTable.splice(i, 1);
}
console.log("randomTable: " + randomTable);

$('#box').text(randomTable[0]);
var x = 1;
function repeat(){
  window.setTimeout(function(){
    if (x < 8) {
      $('#box').text(randomTable[x]);
      x++;
      repeat();
    }
  },8000);
};
repeat();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="box"></p>

Dynamically display content inside of a DIV with FOR loop


Tag : php , By : Genipro
Date : March 29 2020, 07:55 AM
Hope this helps Note on title: I really did not know how to perfectly name this question. If someone can suggest a more appropriate title, please do. , I simply had to break out of inner loop at the right time:
$display = 0;
$x = 0;

for ($divs=0; $divs < $total_divs; $divs++) { 
    echo '<div class="w3-display-container" style="height: 300px;">';

    for (; $x < count($test_cases);) {

        if ($display > 8) {
            $display = 0;
        }

        echo '<div class="' . $displays[$display] . ' w3-padding">';
        echo '<form target="_blank" action="./test.php" method="get">';
        echo '<input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="' . $test_cases[$x] . '" name="test">';
        echo '</form>';
        echo '</div>';

        $x++;
        $display++;

        // Solution
        if ($x !== 0 && $x % 9 === 0) {
            break;
        }
    }

    echo '</div>';
}

How can I loop from a data file to display content?


Tag : ruby , By : Eric
Date : March 29 2020, 07:55 AM
I wish this help you To successfully iterate through a given list, all you need is a properly structured data.
For {% for member in site.data.members %} to loop properly, site.data.members has to be an array of members. But from the info you have posted, it looks like the resulting data is a Hash (or dictionary) of key-value pairs instead of an Array.
<pre>
{{ site.data.members | inspect }}
</pre>
[
  {
    "attorney1": {
      "birth_country": "United States of America",
      "birth_city": "Paso Robles"
    }
  },
  {
    "attorney2": {
      "birth_country": "United States of America",
      "birth_city": "Paso Robles"
    }
  },
]
{
  "attorney1": {
    "birth_country": "United States of America",
    "birth_city": "Paso Robles"
  },
  "attorney2": {
    "birth_country": "United States of America",
    "birth_city": "Paso Robles"
  }
}
# _data/members.yml

- attorney1:
    birth_country: "United States of America"
    birth_city: "Paso Robles"
- attorney2:
    birth_country: "United States of America"
    birth_city: "Paso Robles"
# _data/members/attorney1.yml

birth_country: "United States of America"
birth_city: "Paso Robles"
# _data/members/attorney2.yml

birth_country: "United States of America"
birth_city: "Paso Robles"
{% assign member = site.data.members | where: 'author', page.author | first %}
Related Posts Related QUESTIONS :
  • Getting the text from a drop-down box
  • Length of a JavaScript object
  • How Do I Post and then redirect to an external URL from ASP.Net?
  • How to set up a CSS switcher
  • Wrapping lists into columns
  • How to keyboard down or up between dropdown "options"?
  • Http Auth in a Firefox 3 bookmarklet
  • How can I turn a string of HTML into a DOM object in a Firefox extension?
  • Call ASP.NET function from JavaScript?
  • JavaScript Troubleshooting Tools in Internet Explorer
  • MAC addresses in JavaScript
  • Capturing TAB key in text box
  • How to set CSS background color of HTML using JavaScript
  • How can I make the browser see CSS and Javascript changes?
  • redux how to use state
  • All data in the db is lost when closing a express based node js server
  • How to convert javascript code for Angular
  • XPath select on child nodes
  • Idle event on mouse move - how to stop script permanently on mouse move
  • Why do I get logic is not defined in this code
  • When I enter a number in the input, the first function starts
  • ES6 imports and node_modules hell
  • How to get css selector of clicked-on element?
  • How to auto input MySQL data (input column 1 data to auto input column 2 data with same column) in php?
  • Appending to Datalist Via Javascript
  • Customizing Material-UI Components with Styled-Components
  • Populate elements with class name using Javascript
  • How to execute promises in batches (first resolving 10, then next 10 and so on)
  • Maximo JS automation script: "importPackage" is not defined
  • How to surround selected text inside textarea with <em> on key combination CTRL+i?
  • Your configured registry does not support audit requests ~ On npm audit
  • What's the Angular equivalent of Vue <slot/>?
  • Iconify icon not updating when "data-icon" set with setAttribute()
  • Javascript newbie stuck with XMLHttpRequest return data
  • How to add obj to to state in my example Redux React
  • Loading "grunt-karma.js" tasks...ERROR >> SyntaxError: Unexpected identifier
  • Why do I get log is not defined
  • get the multiple index of the same string
  • How can I iterate over an Array object by using For IN or FOR OF
  • Launch local executable from web browser
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com