I am not able to display the elements of this array in html. I am fetching data from the Bscscan api. I can fetch perfectly from the first api but the second does not show the data in the local browser. I will show you all the code I've got.
I added also pictures of what the browser looks like and my terminal. It looks like i cannot map through arrays with objects, but I have tried everything change the object into react readable content, and nothing worked, so I will show you the code I started with. The Address 2 is the problem address.
Code :
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import React from 'react'
export default function Home(props) {
const datatransone = props.addresstransaction;
const databalone = props.addressbalance;
//something wrong with stringify
// const datatransone = JSON.stringify(datatransjson);
console.log(databalone);
console.log(datatransone);
return (
<ul>
<h1>Address One</h1>
{databalone.map((balance) => {
return (
<li>{(balance.result * 1e-18).toString()}</li>
)})}
<div>
<h1>Address Two</h1>
<div>
{datatransone.map(function(d){
return (<li key={d.hash}>{d.result.hash}</li>)
})}
</div>
</div>
</ul>
);
}
export async function getServerSideProps(context) {
let wlunarush = ['0xb4e856c2a257457b862daed14967578bbdba3526', '0x52ab04656c807a3af96f98e4428291e813c2687a'];
// let contractaddress = '0xde301D6a2569aEfcFe271B9d98f318BAee1D30a4';
let balance = wlunarush.map(function(element){
let bscbalance = 'https://api-testnet.bscscan.com/api?module=account&action=tokenbalance&contractaddress=0x0DBfd812Db3c979a80522A3e9296f9a4cc1f5045&address=' element '&tag=latest&apikey=E2JAJX6MAGAZUHSYIBZIEMKMNW9NZKPR7I';
return bscbalance;
})
let transaction = wlunarush.map(function(element){
let bsctransaction = 'https://api-testnet.bscscan.com/api?module=account&action=tokentx&contractaddress=0x0DBfd812Db3c979a80522A3e9296f9a4cc1f5045&address=' element '&page=1&startblock=0&offset=1&endblock=999999999&sort=asc&apikey=E2JAJX6MAGAZUHSYIBZIEMKMNW9NZKPR7I';
return bsctransaction;
})
const addressbalance = await Promise.all(balance.map(u => fetch(u)))
const addresstransaction = await Promise.all(transaction.map(e => fetch(e)))
// console.log(bscbalancelist)
// console.log(bscbalancelist);
// const responsesec = await fetch(transaction);
// const bscbalancelist = await bscbalone.json();
return {
props: {
addressbalance: await Promise.all(addressbalance.map(r => r.json())),
addresstransaction: await Promise.all(addresstransaction.map(p => p.json())),
}
};
}
CodePudding user response：
You have a nested array, so you will need to use a nested map in order to iterate over all items.
I've simplified a bit, but you should be able to get the idea and adapt it to match your exact needs.
function Home() {
const databalone = [{status: '1', message: 'OK', result: '1234'},{status: '1', message: 'OK', result: '1234'}];
const datatransone = [{status: '1', message: 'OK', result: [{hash: '4321'}]},{status: '1', message: 'OK', result: [{hash: '54321'}]}];
return (
<ul>
<h1>Address One</h1>
{databalone.map((balance) => {
return (
<li>{(balance.result * 1e-18).toString()}</li>
)})}
<div>
<h1>Address Two</h1>
<div>
{datatransone.map(function(d){
return (<li>{d.result.map((r) => <span>{r.hash}</span>)}</li>)
})}
</div>
</div>
</ul>
);
}
ReactDOM.render(<Home />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>CodePudding user response：
Solved, I had to use the index to specify what array I wanted to .map().
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import React from 'react'
export default function Home(props) {
const datatransone = props.addresstransaction;
const databalone = props.addressbalance;
var transactionarray = datatransone[0];
// var newgotwo = datatransone[1];
// console.log(databalone);
// console.log(datatransone);
return (
<ul>
<h1>Address One</h1>
{databalone.map((balance) => {
return (
<li>{(balance.result * 1e-18).toString()}</li>
)})}
<div>
<h1>Address Two</h1>
<div>
{transactionarray.result.map(function(d){
return (<li key={d.hash}>{d.hash}</li>)
})}
{/* {newgotwo.result.map(function(d){
return (<li key={d.hash}>{d.hash}</li>)
})} */}
</div>
</div>
</ul>
);
}
export async function getServerSideProps(context) {
let wlunarush = ['0xb4e856c2a257457b862daed14967578bbdba3526', '0x52ab04656c807a3af96f98e4428291e813c2687a'];
// let contractaddress = '0xde301D6a2569aEfcFe271B9d98f318BAee1D30a4';
let balance = wlunarush.map(function(element){
let bscbalance = 'https://api-testnet.bscscan.com/api?module=account&action=tokenbalance&contractaddress=0x0DBfd812Db3c979a80522A3e9296f9a4cc1f5045&address=' element '&tag=latest&apikey=E2JAJX6MAGAZUHSYIBZIEMKMNW9NZKPR7I';
return bscbalance;
})
let transaction = wlunarush.map(function(element){
let bsctransaction = 'https://api-testnet.bscscan.com/api?module=account&action=tokentx&contractaddress=0x0DBfd812Db3c979a80522A3e9296f9a4cc1f5045&address=' element '&page=1&startblock=0&offset=1&endblock=999999999&sort=asc&apikey=E2JAJX6MAGAZUHSYIBZIEMKMNW9NZKPR7I';
return bsctransaction;
})
const addressbalance = await Promise.all(balance.map(u => fetch(u)))
const addresstransaction = await Promise.all(transaction.map(e => fetch(e)))
// console.log(addresstransaction)
// console.log(addressbalance);
// const responsesec = await fetch(transaction);
// const bscbalancelist = await bscbalone.json();
return {
props: {
addressbalance: await Promise.all(addressbalance.map(r => r.json())),
addresstransaction: await Promise.all(addresstransaction.map(p => p.json())),
}
};
}