如何使用 JavaScript 将文件 JSON 中的其他信息显示为 html

问题描述 投票：0回答：1

我已经学习了一些从文件 JSON 中获取数据的 fetch，但我仍然对如何通过单击图像获取其他信息感到困惑。我有这样的文件数据 JSON。该文件包含一些产品的名称、图片、网址和品牌

{
  "products": [
    {
      "id": "11",
      "name": "panda",
      "brand": "blue",
      "jenis": "cool panda",
      "deskripsi": "cute panda",
      "image": "a8205ca774a533e0053e6fe969443510.jpg",
      "url": "http:\/\/localhost:5000\/images\/a8205ca774a533e0053e6fe969443510.jpg",
      "createdAt": "2024-11-28 03:34:22",
      "updatedAt": "2024-11-29 06:37:36"
    },
    {
      "id": "13",
      "name": "fox",
      "brand": "crowd",
      "jenis": "fox samurai",
      "deskripsi": "strongest samurai",
      "image": "c87dcede772ef2d0fbdd5ceb65237937.jpg",
      "url": "http:\/\/localhost:5000\/images\/c87dcede772ef2d0fbdd5ceb65237937.jpg",
      "createdAt": "2024-11-28 14:12:39",
      "updatedAt": "2024-11-29 06:39:41"
    },
    {
      "id": "14",
      "name": "panda",
      "brand": "digital",
      "jenis": "samurai",
      "deskripsi": "its panda samurai",
      "image": "167748215ed489e0f363d5be562026dd.jpg",
      "url": "http:\/\/localhost:5000\/images\/167748215ed489e0f363d5be562026dd.jpg",
      "createdAt": "2024-11-29 03:39:16",
      "updatedAt": "2024-11-29 06:38:10"
    }
  ]
}

我有这样的 JavaScript 代码来显示图像、名称和按钮的卡片。

const data        = "../php/data.json";
const jenisList   = document.querySelector('.content');
var urlParams     = new URLSearchParams(window.location.search);
var jenis         = urlParams.get("jenis");
const modalDetail = document.querySelectorAll('.btn-primary');

const getProducts = () => {
  fetch(data)
    .then(response => {
      return response.json();
    }).then(responseJson => {
      if (jenis == null) {
        showProduct(responseJson.products);
      } else {
        jenisProduct(responseJson.products);
      }
    }).catch(error => {
      console.log(error);
    });
}

const showProduct = product => {
  jenisList.innerHTML = '';
  product.forEach(agen => {
    jenisList.innerHTML +=
      `<div class="product-list">
            <div class="flex-div">
            <a href="" class="foto-product"><img src="${agen.url}" class="product-img"></a>
                <div class="product-info">
                    <p>${agen.name}</p>
                </div>
                <a href="#" class="btn-primary" data-toggle="modal" 
                data-target="#movieDetailModal" data-imdbid="${agen.id}">Show Detail</a>
            </div>
        </div>`
  });
}

const jenisProduct = product => {
  jenisList.innerHTML = '';
  product.forEach(agen => {
    if (agen.jenis === jenis) {
      jenisList.innerHTML +=
        `<div class="product-list">
            <div class="flex-div">
            <a href="" class="foto-product"><img src="${agen.url}" class="product-img"></a>
                <div class="product-info">
                    <p>${agen.name}</p>
                </div>
                <a href="${agen.id}" class="btn btn-primary modal-detail-button" data-toggle="modal" 
                data-target="#movieDetailModal" data-imdbid="${agen.id}">Show Detail</a> 
            </div>
        </div>`
    }
  });
}

document.addEventListener('DOMContentLoaded', getProducts);

而且我仍然困惑如何从 JSON 获取其他数据，例如 

id
、
name
、
image
、
url
、
brand
、
jenis
、
deskripsi
》，具体说明我单击的图像或按钮，它会显示 JSON 中的其他数据吗？.

从 JSON 获取其他数据，如 

id
、
name
、
image
、
url
、
brand
、
jenis
、
deskripsi
》，具体说明我单击什么图像或按钮，它将显示其他数据来自 JSON。我只是想了解 fetch

javascript html json fetch-api
1个回答
0
投票

如果您为每个 

<a>
元素添加事件处理程序，那么您可以访问您的数据并显示数据中的更多信息。

请参阅

showProduct()

中添加的代码

如果您在全页模式下运行代码片段，则单击“显示详细信息”时可以更轻松地看到显示的数据。

const data        = "../php/data.json";
const jenisList   = document.querySelector('.content');
var urlParams     = new URLSearchParams(window.location.search);
var jenis         = urlParams.get("jenis");
const modalDetail = document.querySelectorAll('.btn-primary');

const dataInternal = {
  "products": [
    {
      "id": "11",
      "name": "panda",
      "brand": "blue",
      "jenis": "cool panda",
      "deskripsi": "cute panda",
      "image": "a8205ca774a533e0053e6fe969443510.jpg",
      "url": "http:\/\/localhost:5000\/images\/a8205ca774a533e0053e6fe969443510.jpg",
      "createdAt": "2024-11-28 03:34:22",
      "updatedAt": "2024-11-29 06:37:36"
    },
    {
      "id": "13",
      "name": "fox",
      "brand": "crowd",
      "jenis": "fox samurai",
      "deskripsi": "strongest samurai",
      "image": "c87dcede772ef2d0fbdd5ceb65237937.jpg",
      "url": "http:\/\/localhost:5000\/images\/c87dcede772ef2d0fbdd5ceb65237937.jpg",
      "createdAt": "2024-11-28 14:12:39",
      "updatedAt": "2024-11-29 06:39:41"
    },
    {
      "id": "14",
      "name": "panda",
      "brand": "digital",
      "jenis": "samurai",
      "deskripsi": "its panda samurai",
      "image": "167748215ed489e0f363d5be562026dd.jpg",
      "url": "http:\/\/localhost:5000\/images\/167748215ed489e0f363d5be562026dd.jpg",
      "createdAt": "2024-11-29 03:39:16",
      "updatedAt": "2024-11-29 06:38:10"
    }
  ]
}


const getProducts = () => {
  // EDIT Added for demo, replaces the fetch() 
  showProduct( dataInternal.products );

  fetch(data)
    .then(response => {
      return response.json();
    }).then(responseJson => {
      if (jenis == null) {
        showProduct(responseJson.products);
      } else {
        jenisProduct(responseJson.products);
      }
    }).catch(error => {
      console.log(error);
    });
}


function showProduct( product ) {
  jenisList.innerHTML = '';
  product.forEach(agen => {
    jenisList.innerHTML +=
      `<div class="product-list">
            <div class="flex-div">
            <a href="" class="foto-product"><img src="${agen.url}" class="product-img"></a>
                <div class="product-info">
                    <p>${agen.name}</p>
                </div>
                <a href="#" class="btn-primary" data-toggle="modal"
                data-target="#movieDetailModal" data-imdbid="${agen.id}">Show Detail</a>
            </div>
        </div>`
  });

  // EDIT Added for handling clicking on "Show Detail"
  for( let button of document.querySelectorAll("a.btn-primary") ) {
    button.addEventListener( "click", event => {
      let id = event.target.dataset.imdbid;
      for( let next of product ) {
        if( next.id == id )  document.querySelector("output").innerHTML += `<br>id: ${next.id}, name: ${next.name}, image: ${next.image}, url: ${next.url}, brand: ${next.brand}, jenis: ${next.jenis}, deskripsi: ${next.deskripsi}`;
      }
    } )
  }
}


function jenisProduct( product ) {
  jenisList.innerHTML = '';
  product.forEach(agen => {
    if (agen.jenis === jenis) {
      jenisList.innerHTML +=
        `<div class="product-list">
            <div class="flex-div">
            <a href="" class="foto-product"><img src="${agen.url}" class="product-img"></a>
                <div class="product-info">
                    <p>${agen.name}</p>
                </div>
                <a href="${agen.id}" class="btn btn-primary modal-detail-button" data-toggle="modal"
                data-target="#movieDetailModal" data-imdbid="${agen.id}">Show Detail</a>
            </div>
        </div>`
    }
  });
}

document.addEventListener('DOMContentLoaded', getProducts);
<div class="content">
</div>

<output></output>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.