how to get struct data from contract by web3?

Question

I tried to get the data of the struct by its mapping string, but I got undefined in innerhtml and get following result in the html console log:

however I can search the data from the Remix ABI, anyone know how to retrieve the data by web3?

my web3 version is 1.5.1, and the entire code is here

this is my solidity code:

pragma solidity >=0.7.0 <0.9.0;

contract Storage{

    string b = "calculation a";
    struct UserInfo {
        string time;
        string source;
        uint emission;
    }
    mapping (string => UserInfo) users;

    the function of saving data is ignored
    
    function search(string memory input_source) public view returns (uint, string memory) {
        return (users[input_source].emission, users[input_source].time);
    }
}

and this is the javascript

// Initialize Web3
var web3 = new Web3('http://localhost:7545');

// Set Account
web3.eth.defaultAccount = '0x16E15b184F39c4fBE1A4B29052CE018c5748610B';

// Set Contract Abi
var ABI = [abi];

// Set Contract Address
var contractAddress = 'my addr'; // Add Your Contract address here!!!

// Set the Contract
var contract = new web3.eth.Contract(ABI, contractAddress);

//get the formCarbonEmission data
function showCompanyResultLineChart() {
  const input_company = document.getElementById("company");//the "company" is the id of the button"
  const companyResultLineChart = document.getElementById("companyResultLineChart");
  //the "companyResultLineChart" is the id for displaying the data
  
  const result = contract.methods.search(input_company).call({from:web3.eth.defaultAddress});
  console.log(result)
  companyResultLineChart.innerHTML = "the " + input_company.value + 
" factory created " + result[0] + " tons of CO2 in " + result[1];//the result[] show "undefined".
}

Answer 1

Reading from the Ethereum blockchain is asynchronous. You need to either define showCompanyResultLineChart() as an async function and await the read method call as in:

async function showCompanyResultLineChart() {
...
  
  const result = await contract.methods.search(input_company).call({from:web3.eth.defaultAddress});
...
}

Or, use the then(..) syntax and place all result-dependent lines in the callback function as in:

function showCompanyResultLineChart() {
...
  
  contract.methods.search(input_company).call({from:web3.eth.defaultAddress}).then((result) => {
  console.log(result)
  companyResultLineChart.innerHTML = "the " + input_company.value + 
" factory created " + result[0] + " tons of CO2 in " + result[1];//the result[] show "undefined".
});
}