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

Question

I don't know if you can help me, but I have a problem., I tried to solve it for about 4 hours but it didn't work, I would like, if someone selects a currency from the dropdown list, then will the name and price and logo also changed in the page and shows the info of the currency which was selected in the list

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)





}

Answer 1

 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>

Use polyfill for find to work in 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;
        };
    }

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

Question

1 answers

solution1
1 ACCPTED 2021-09-25 23:09:28

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

Question

1 answers

solution1 1 ACCPTED 2021-09-25 23:09:28

solution1
1 ACCPTED 2021-09-25 23:09:28