堆栈内存溢出
  繁体   English   中英

从Select菜单中的JSON导入数据并在页面中更改数据

[英]import the data from JSON in Select Menu and change the data also in the page

 原文  2021-09-25 22:48:36  8   1    javascript/ json/ arraylist

问题描述

我不知道你是否可以帮助我，但我有一个问题。，我试图解决它大约 4 个小时但它没有用，我想，如果有人从下拉列表中选择一种货币，那么将页面中的名称、价格和徽标也发生了变化，并显示了在列表中选择的货币的信息

JSON

[
  {
    "cryptoname": "Cardano",
    "price": 2.05,
    "img": "https://dynamic-assets.coinbase.com/da39dfe3632bf7a9c26b5aff94fe72bc1a70850bc488e0c4d68ab3cf87ddac277cd1561427b94acb4b3e37479a1f73f1c37ed311c11a742d6edf512672aea7bb/asset_icons/a55046bc53c5de686bf82a2d9d280b006bd8d2aa1f3bbb4eba28f0c69c7597da.png",
    "link": "https://www.coinbase.com/de/price/cardano"
  },
  {
    "cryptoname": "VECHAIN",
    "price": 0.078,
    "img": "https://dynamic-assets.coinbase.com/0ad9feddd1edfda57c5ee772f241bf8a1b5c78c8d90da7acf5281718d67e121f9d8934e6a796cfc9d7693da2e188926b40bba5a25f9802fb2350bb5af2ff2c2c/asset_icons/2163bda6b530aca9b138244a21abf50f87626beb0605fc5fd492d0dc0eb04143.png",
    "link": "https://www.coinbase.com/de/price/vechain"
  },
  {
    "cryptoname": "Solana",
    "price": 118.37,
    "img": "https://dynamic-assets.coinbase.com/d2ba1ad058b9b0eb4de5f0ccbf0e4aecb8d73d3a183dbaeabbec2b6fd77b0a636598e08467a05da7e69f39c65693f627edf7414145ee6c61e01efc831652ca0f/asset_icons/8733712db93f857c04b7c58fb35eafb3be360a183966a1e57a6e22ee5f78c96d.png",
    "link": "https://www.coinbase.com/de/price/solana"
  },
  {
    "cryptoname": "Polygon",
    "price": 0.96,
    "img": "https://dynamic-assets.coinbase.com/085ce26e1eba2ccb210ea85df739a0ca2ef782747e47d618c64e92b168b94512df469956de1b667d93b2aa05ce77947e7bf1b4e0c7276371aa88ef9406036166/asset_icons/57f28803aad363f419a950a5f5b99acfd4fba8b683c01b9450baab43c9fa97ea.png",
    "link": "https://www.coinbase.com/de/price/polygon"
  },
  {
    "cryptoname": "Polkadot",
    "price": 25.92,
    "img": "https://dynamic-assets.coinbase.com/e69bfafd90cc11d33bec57383c354ec1d99f29fdb1a8c3822bf438a58ca6dd032d19e9f5b89fd3dbfb3af45af96610da2f253ad225cd83fcabc3db8e5e52f20d/asset_icons/cb500931800355a865fb919a692a03c346df838e594c408b033f0b91a99cf1ba.png",
    "link": "https://www.coinbase.com/de/price/polkadot"
  }
]

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">

   <link rel="stylesheet" href="style.css">
</head>
<body>
   
<div class="container">

         <div class="left">
            <img src="" alt="" id="icons">
            <p id="nk">Währung:<span class="spizial">115</span> </p> 
            <p id="kp">Preis: <span class="spizial">115</span> </p> 
            <span class="linken"> <a  id="link" href="#" target="blank">Extern Link</a> </span>

         </div>

         <div class="right">
            <h2 > KRYPTOWÄHRUNGEN RECHNER </h2>
            <div class="inhalt">
               <div name="" id="addselect"></div>
               <!-- <select name="" id="selectkrypto" onchange="GetDetails(this.value)">            </select> -->
               <label for="" class="paragraf">Wie viel in Euro </label>
               <input type="number" name="" id="inputpreis" value="">
            </div>
            <div class="gesamt" id="gesamt">  </div>
         </div>


</div>






   <script src="app.js"></script>
</body>
</html>

JAVASCRIPT

let show=document.getElementById("show")
let addselect=document.getElementById("addselect");
let krypto_name=document.getElementById("nk");
let krypto_preis=document.getElementById("kp");
let krypto_logo=document.getElementById("icons");
let krypto_link=document.getElementById("link");
let insgesamt=document.getElementById("gesamt");
let inputpreis=document.getElementById("inputpreis");



let xReq=new XMLHttpRequest;
let api="db.json"
xReq.open("GET", api,true);
xReq.onload=function(){
let Datei=JSON.parse(xReq.responseText)
Dateinmapen(Datei)
}
xReq.send()


                                 /*  */
  function Dateinmapen(datein){
   addselect.innerHTML+=
   ` <select name="" id="selectkrypto"  onchange="GetDetails( \'${this.value}\')">  ${datein.map(getname=>    `  <option value="">   ${getname.cryptoname }    </option> `      )}         </select>`

   datein.map(info=>{
   
      // `<option value="  ${info.cryptoname}   {"preis":"${info.price}"}   ${info.link} ${info.img} " >  ${info.cryptoname}  </option>`

      krypto_name.innerHTML= info.cryptoname
      krypto_preis.innerHTML=info.price
      krypto_logo.src=info.img;
      krypto_link.setAttribute("href",info.link )
      getSelection(info)

      inputpreis.addEventListener("keyup",() =>{

         // inputpreis.value=3434;
          insgesamt.innerHTML=  Math.floor(inputpreis.value* info.price)  

      })

   })

}



function GetDetails(ele){
 console.log(select.value)
    console.log("?name="+select.options)
   // krypto_name.innerHTML= select.options[select.selectedIndex].text
   krypto_preis.innerHTML= JSON.parse(select.value)





}

1 个解决方案

解决方案1
 1 已采纳  2021-09-25 23:09:28

 const json = [ { "cryptoname": "Cardano", "price": 2.05, "img": "https://dynamic-assets.coinbase.com/da39dfe3632bf7a9c26b5aff94fe72bc1a70850bc488e0c4d68ab3cf87ddac277cd1561427b94acb4b3e37479a1f73f1c37ed311c11a742d6edf512672aea7bb/asset_icons/a55046bc53c5de686bf82a2d9d280b006bd8d2aa1f3bbb4eba28f0c69c7597da.png", "link": "https://www.coinbase.com/de/price/cardano" }, { "cryptoname": "VECHAIN", "price": 0.078, "img": "https://dynamic-assets.coinbase.com/0ad9feddd1edfda57c5ee772f241bf8a1b5c78c8d90da7acf5281718d67e121f9d8934e6a796cfc9d7693da2e188926b40bba5a25f9802fb2350bb5af2ff2c2c/asset_icons/2163bda6b530aca9b138244a21abf50f87626beb0605fc5fd492d0dc0eb04143.png", "link": "https://www.coinbase.com/de/price/vechain" }, { "cryptoname": "Solana", "price": 118.37, "img": "https://dynamic-assets.coinbase.com/d2ba1ad058b9b0eb4de5f0ccbf0e4aecb8d73d3a183dbaeabbec2b6fd77b0a636598e08467a05da7e69f39c65693f627edf7414145ee6c61e01efc831652ca0f/asset_icons/8733712db93f857c04b7c58fb35eafb3be360a183966a1e57a6e22ee5f78c96d.png", "link": "https://www.coinbase.com/de/price/solana" }, { "cryptoname": "Polygon", "price": 0.96, "img": "https://dynamic-assets.coinbase.com/085ce26e1eba2ccb210ea85df739a0ca2ef782747e47d618c64e92b168b94512df469956de1b667d93b2aa05ce77947e7bf1b4e0c7276371aa88ef9406036166/asset_icons/57f28803aad363f419a950a5f5b99acfd4fba8b683c01b9450baab43c9fa97ea.png", "link": "https://www.coinbase.com/de/price/polygon" }, { "cryptoname": "Polkadot", "price": 25.92, "img": "https://dynamic-assets.coinbase.com/e69bfafd90cc11d33bec57383c354ec1d99f29fdb1a8c3822bf438a58ca6dd032d19e9f5b89fd3dbfb3af45af96610da2f253ad225cd83fcabc3db8e5e52f20d/asset_icons/cb500931800355a865fb919a692a03c346df838e594c408b033f0b91a99cf1ba.png", "link": "https://www.coinbase.com/de/price/polkadot" } ]; //console.log(json); let nameOptions = json.map(c => c.cryptoname).map(c => `<option value='${c}'>${c}</option>`).join(''); namesOptions = `<option disabled selected>select cryptoname</option>`+ nameOptions; document.getElementById('selectkrypto').innerHTML = namesOptions; const krypto_link=document.getElementById("link"); const priceDoc=document.getElementById("price"); const krypto_logo=document.getElementById("icons"); const curr=document.getElementById("curr"); function GetDetails(val){ const currencyDetails = json.find(c => c.cryptoname === val); if(currencyDetails){ const {price, img, link} = currencyDetails; krypto_logo.src = img; krypto_link.href = link; priceDoc.textContent = price; curr.textContent = val; } }
 <select name="" id="selectkrypto" onchange="GetDetails(this.value)"> </select> <img src="" alt="" id="icons"> <p id="nk">Währung:<span id="curr" class="spizial"></span> </p> <p id="kp">Preis: <span id="price" class="spizial"></span> </p> <span class="linken"> <a id="link" href="#" target="blank">Extern Link</a> </span>

使用 polyfill 查找在 IE 中工作

if (!Array.prototype.find) {
        Array.prototype.find = function(predicate) {
            if (this == null) {
                throw new TypeError('Array.prototype.find called on null or undefined');
            }
            if (typeof predicate !== 'function') {
                throw new TypeError('predicate must be a function');
            }
            var list = Object(this);
            var length = list.length >>> 0;
            var thisArg = arguments[1];
            var value;
            
            for (var i = 0; i < length; i++) {
                value = list[i];
                if (predicate.call(thisArg, value, i, list)) {
                    return value;
                }
            }
            return undefined;
        };
    }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 从外部页面导入Json数据 下拉菜单中的 Select 选项并在同一页面上显示有关它的数据 使用反应从页面导入数据 串联 <select>当我更改选项时，使用来自json的数据 将数据从选择菜单传递到另一个选择菜单AJAX Codeigniter React - 如何使用来自本地.json文件的数据，基于另一个选择菜单的值填充一个选择菜单 从选择下拉菜单中获取数据 使用 Lodash 从 JSON 数据创建导航栏菜单 使用“选择”菜单进行数据验证 如何将数据从 JSON 文件导入到嵌入中？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM