Front-end development: Why the return values are not shown correctly in my browser?

Question

I'm learning how to write a smart contract in Solidity (programming language) and now developing the front end.

In Solidity, the getter functions are generated automatically.

Problem: The last two values I get are shown in a way I'm not expecting.

In my contract I have the following structures and array:

  struct Voter{
     bool vote;
     address add;
     string justification;
 }

 struct Proposal{
     string descrip;
     uint target_val;
     bytes2 ID;
     address recipient;
     uint pro_exch_rate;
     Voter []  votes;             
 }

 Proposal [] public proposals;

In my .js file, I have:

// input some libraries 

window.App = {
//something here 
// we set proposal ...

get_proposal_spec: function(){
var indx2 = parseInt(document.getElementById("indx2").value);
var spec1 = document.getElementById("spec1");
var spec2 = document.getElementById("spec2");
var spec3 = document.getElementById("spec3");
var spec4 = document.getElementById("spec4");
var spec5 = document.getElementById("spec5");


  MetaCo.deployed().then(function(instancez) {
    return instancez.proposals.call(indx2);
  }).then (function(val){
   spec1.innerHTML = val[0].valueOf();
   spec2.innerHTML = val[1].valueOf();
   spec3.innerHTML = val[2].valueOf();
   spec4.innerHTML = val[3].valueOf();
   spec5.innerHTML = val[4].valueOf();
   })  },  };

In my HTML file I have:

<h1>Get Proposal Spec</h1>
<br><label for="indx2">Proposal Index:</label><input type="text" 
id="indx2" placeholder="e.g., 95"></input>
<br><br><button  id="send6" onclick="App.get_proposal_spec()">Set 
Proposal</button>
<br>
<span style="padding-left:130px;"> Description:<span   id="spec1">
</span>
<br>
<span style="padding-left:130px;"> Funding Amount:<span   id="spec2">
</span>
<br>
<span style="padding-left:130px;"> Proposal ID:<span   id="spec3">
</span>
<br>
<span style="padding-left:130px;"> Recipient Address:<span  id="spec4">
</span>
 <br>
<span style="padding-left:130px;"> Exchange rate:<span  id="spec5">
</span>

Stating the problem in more detail: The values corresponding to

val[0], val[1] and val[2]

are shown correctly in my browser but values val[3] and val[4] are shown incorrectly. I have checked my contract with an online UI and it shows the result correctly. So, I think I'm making some mistakes in front end development.

Edit: I'm expecting to see an address like:

0xdfad09da5e9232bcb0188073c29b1a2807371398

and an integer for val[3] and val [4] respectively. But I'm seeing:

0x0000000000000000000000000000000000000000 

and

6.5117631359869006216275524134217285150984976593190912e+52.