Hallo zusammen, ich arbeite aktuell ein Buch zum Thema Blockchain-Entwicklung in Java durch und komme soweit auch ganz gut zurecht. Im aktuellen Kapitel ist jedoch ein kleiner HTML Teil dabei in welchem es darum geht einen Block-Explorer (wie z,B bei Bitcoin: https://live.blockcypher.com/btc/) zu erstellen - nur leider habe ich von HTML und JavaScript nicht viel Ahnung. Das ganze habe ich mit meiner Web-Api verbunden. Allerdings gibt es bei Ansicht für Transaktionen ein Problem und zwar werden die Daten dieser Tabelle nicht mit Daten befüllt (alle anderen Bereiche des Explorers, wie die Ansicht für Blöcke funktionieren komischerweise).
Ich versuche die TransaktionsId aus dem QueryParameter mit der JavaScript Funktion window.parameter.search zu laden und an den API Endpunkt für Transaktionen weiterzugeben und daraus dann die Daten in meine Tabelle einfügen. Aber leider will das irgendwie nicht klappen (Habe bereits die Musterlösung aus dem Buch selbst eingefügt, ohne Erfolg und auch den Pfad überprüft, dieser führt an die korrekte Stelle).
Die Transaktionen selbst werden als JSON Objekte dargestellt und auch am entsprechenden Endpoint der API korrekt angezeigt (wie auch auf den Screenshots ersichtlich).
Habe alles anbei auf den Screenshots nochmal anschaulich dargestellt, ebenso die Erklärung aus dem Buch. Villeicht kann mir ja jemand weiterhelfen.
Hier mal der Code. die entsprechende Funktion habe ich markiert:
Villeicht kann mir ja von euch jemand weiterhelfen...
Ich versuche die TransaktionsId aus dem QueryParameter mit der JavaScript Funktion window.parameter.search zu laden und an den API Endpunkt für Transaktionen weiterzugeben und daraus dann die Daten in meine Tabelle einfügen. Aber leider will das irgendwie nicht klappen (Habe bereits die Musterlösung aus dem Buch selbst eingefügt, ohne Erfolg und auch den Pfad überprüft, dieser führt an die korrekte Stelle).
Die Transaktionen selbst werden als JSON Objekte dargestellt und auch am entsprechenden Endpoint der API korrekt angezeigt (wie auch auf den Screenshots ersichtlich).
Habe alles anbei auf den Screenshots nochmal anschaulich dargestellt, ebenso die Erklärung aus dem Buch. Villeicht kann mir ja jemand weiterhelfen.
Hier mal der Code. die entsprechende Funktion habe ich markiert:
HTML:
<!--
~ Copyright (c) Tobias Fertig, 2018.
-->
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags-->
<meta name="description" content="The explorer for your first blockchain">
<meta name="author" content="Tobias Fertig">
<meta name="keywords"
content="ethereum, explorer, blockchain, etherchain, cryptocurrency, cryptocurrencies, bitcoin">
<title>Block Explorer Light</title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/paper/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
<script src="/superagent/superagent.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="/">Blockchain Explorer Light</a></div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="send.html">Send Transaction</a></li>
<!--<li><a href="/accounts">Accounts</a></li>-->
<!--<li><a href="/tx/pending">Pending Tx</a></li>-->
</ul>
<form class="navbar-form navbar-right">
<div class="form-group"><input class="form-control" id="search" type="text"
placeholder="Block / Tx / Account" name="search"></div>
<button class="btn btn-default" type="button" onclick="triggerSearch()">Submit</button>
</form>
</div>
</div>
</nav>
<div id="transaction" class="container">
<h3>Transaktion</h3>
<table class="table">
<tbody>
<tr>
<td>ID:</td>
<td><a id="txId"
href="/transactions.html?txid=0x43511cada8aad33a2d7735d2108eabbb2be1a0bc754d6e6aa04d7eec53fd3ef4"></a>
</td>
</tr>
<tr>
<td>Block ID:</td>
<td><a id="blockId"
href="/blocks.html?blockid=0x0107d994eea5681e4635739197e1b3227877a19b3e7b457a811b1de1fb797edb"></a>
</td>
</tr>
<!--<tr>-->
<!--<td>Block number:</td>-->
<!--<td><a href="/block/4973877">4973877</a></td>-->
<!--</tr>-->
<tr>
<td>Sender:</td>
<td>
<a id="sender" href="/accounts.html?account=0x57e630bf2d192a515ae391113344fae17285b749"></a>
</td>
</tr>
<tr>
<td>Empfänger:</td>
<td>
<a id="receiver" href="/accounts.html?account=0x48b7f91f6763a5da119f436415d609d0fbe97062"></a>
</td>
</tr>
<tr>
<td>Menge:</td>
<td id="amount"></td>
</tr>
<tr>
<td>Nonce:</td>
<td id="nonce"></td>
</tr>
<tr>
<td>Gebühr - Limit:</td>
<td id="transactionFeeLimit"></td>
</tr>
<tr>
<td>Gebühr - Bezahlt:</td>
<td id="transactionFee"></td>
</tr>
<tr>
<td>Gebühr - Basispreis:</td>
<td id="transactionFeeBasePrice"></td>
</tr>
</tbody>
</table>
</div>
<script>
function triggerSearch() {
var target = 'blockchain/api/' + document.getElementById('search').value;
superagent.agent().get(target)
.then(res => {
if(res.body.blockHash)
{
location.href = 'blocks.html?blockid=' + res.body.blockHash;
}
else if(res.body.txId)
{
location.href = 'transactions.html?txid=' + res.body.txId;
}
else
{
location.href = 'explorer.html';
}
})
};
//***********************
//**FUNKTION FOLGT*******
//***********************
var target = '/blockchain/api/transactions?txid=' + window.location.search.substring(5);
var transactionsHref = "/transactions.html?txid=";
var blocksHref = "/blocks.html?blockid=";
var accountsHref = "accounts.html?account=";
var myagent = superagent.agent();
myagent.get(target)
.then(res => {
console.log(res.body);
document.getElementById('amount').innerHTML = res.body.amount;
document.getElementById('nonce').innerHTML = res.body.nonce;
document.getElementById('txId').innerHTML = res.body.txId;
document.getElementById('txId').href = transactionsHref + res.body.txId;
document.getElementById('blockId').innerHTML = res.body.blockHash;
document.getElementById('blockId').href = blocksHref + res.body.blockHash;
document.getElementById('sender').innerHTML = res.body.sender;
document.getElementById('sender').href = accountsHref + res.body.sender;
document.getElementById('receiver').innerHTML = res.body.receiver;
document.getElementById('receiver').href = accountsHref + res.body.receiver;
document.getElementById('nonce').innerHTML = res.body.nonce;
document.getElementById('transactionFeeLimit').innerHTML = res.body.transactionFeeLimit;
document.getElementById('transactionFee').innerHTML = res.body.transactionFee;
document.getElementById('transactionFeeBasePrice').innerHTML = res.body.transactionFeeBasePrice;
});
</script>
<style>
#transaction {
margin-top: 3cm;
}
</style>
</body>
</html>Villeicht kann mir ja von euch jemand weiterhelfen...
