Skip to main content

Unable to get id value in vanilla JavaScript [closed]

I am trying to fetch data from Pixabay api using JavaScript. Currently, I am able to display the api data but I am trying to create a separate page for each image id dynamically. For example, if someone click on one image, it should redirect to a different page called photos.html/id/photoname.

JavaScript Code

let editorChoice = document.querySelector('.editorchoice')

async function getImg(){
    let imgData = await fetch('https://pixabay.com/api/?key=12345&editors_choice')
   let imgRaw = await imgData.json()
   console.log(imgRaw)
  let itemData = imgRaw.hits

  //To create <div class="row"> in each row dynamically
  for(let i = 0; i < itemData.length; i++) {
    //Declare item variable and store itemData since itemData has stored api details 
    let item = itemData[i] //i stands for those id starts from 0 in the api. 
    //It won't possible to display image if we don't add i
    let imgId = item.id 
    let imgType = item.type
    let imgPreview = item.previewURL
    let imgTag = item.tags
    let webImgWidth = item.webformatWidth
    let webImgHeight = item.webformatHeight
    let largeSizeImg = item.largeImageURL
    let largeImgWidth = item.imageWidth
    let largeImgHeight = item.imageHeight
    let totalImgView = item.views
    let totalDownloads = item.downloads
    let imgCollections = item.collections
    let imgLikes = item.likes
    let imgUrl = item.pageURL
    
    //Here we are dividing each row into 3 columns. If we want to display 4 columns 
    //in each row, it should be i % 4 === 0
if(i % 3 === 0) {
  editorChoice.innerHTML += `<div class="row">`
}

    editorChoice.innerHTML += `<div class="col-lg-4 card">
    <img id="${imgId}" src="${imgPreview}" class="img-responsive center-block" alt="${imgTag}"/>
    <a href="photos.html?id=${imgId}"><p class="text-center">${imgTag}</p></a>
    </div>`
  }

}
getImg()

photos.html

 <div class="content-main">
              <div class="container-fluid bg-3 text-center">   
                <div id="imageDetails"></div>

              </div>
            </div>

index.html

   <div class="container-fluid bg-3 text-center">   
       
        <h3>Editor's Choice</h3><br>

        <div class="editorchoice"> 
      
    </div>
</div>
Via Active questions tagged javascript - Stack Overflow https://ift.tt/dUOrz4F
Labels:

Comments

Post a Comment

Popular posts from this blog

Prop `className` did not match in next js app

I have written a sample code ( Github Link here ). this is a simple next js app, but giving me error when I refresh the page. This seems to be the common problem and I tried the fix provided in the internet but does not seem to fix my issue. The error is Warning: Prop className did not match. Server: "MuiBox-root MuiBox-root-1" Client: "MuiBox-root MuiBox-root-2". Did changes for _document.js, modified _app.js as mentioned in official website and solutions in stackoverflow. but nothing seems to work. Could someone take a look and help me whats wrong with the code? Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console
Post a Comment
Read more