Parsing Array To Input Value (Global .JS file to Specific HTML Page)

Question

I have been able to work through making an array for this application, the problem is now I need to display this array as a value in an input on a page. I have tried multiple things to be able to parse this data to one input form as a value. There are multiple inputs on this page, so I'm not sure I have to do a loop. That is why I wanted to use the array item as the item shown. Can someone tell me what I may be doing wrong? Thank you in advance for your time.

In .js file

function pEdit() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var pInfo = this.responseText.split('\r');
      var out = [];
      for (var i = 0; i < pInfo.length; i++) {
        out.push(pInfo[i]);
        var pn = pInfo[1] ;
      }
    }
  };
  xhttp.open("GET", "http://127.0.0.1:8080/PartInfo.txt", true);
  xhttp.send();
}

On Specific HTML Page

<body onload="pEdit();">
<script>
document.getElementById('eName').value = pEdit('pn') ;
</script>

I have tried to decalare both pInfo[array#] as well as just pn. I am expecting the value of the specific array to show in the form.

`pEdit()` doesn't return anything, so `pEdit(,..)` will never give you a value back. However, even if you did return a value your function is asynchronous, maybe take a look at [this](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) for returning a value from a callback. — Nick Parsons, Jun 30 '19 at 12:54
Good catch and thank you for the link. It was very informational. I was able to get it semi working. I don't think it's following the schema listed in documentation though so not sure how that works. The only thing I am working on now is getting the select items to get the value. Neither "value" nor "options" work to declare it. I tried adding some if then elseif statements to the logic but I believe this is when I ran into the Asynch issue described. — rbtprgmr, Jun 30 '19 at 16:52

score 0 · Accepted Answer · answered Jul 02 '19 at 06:24

So in reading the documentation that Nick gave me, it doesn't seem like this is the proper syntax for Vanilla Javascript, but it works. The values are input boxes on HTML pages, selectedIndex is a dropdown box. If anyone has insight to add to this please let me know.

function gEdit() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var pInfo = this.responseText.split('\r');
      var out = [];
      for (var i = 0; i < pInfo.length; i++) {
        out.push(pInfo[i]);
        document.getElementById('eName').value = out[0] ;
        //document.getElementById('eID').value = out[1] ;
        document.getElementById('eShape').selectedIndex = out[2] ; 
        document.getElementById('eType').selectedIndex = out[3] ; 
        document.getElementById('rdx').value = out[5] ;
        document.getElementById('rdy').value = out[6] ;
        document.getElementById('rdz').value = out[7] ;
        document.getElementById('fdx').value = out[8] ;
        document.getElementById('fdy').value = out[9] ;
        document.getElementById('fdz').value = out[10] ;
        //document.getElementById('eOvrdPOS').value = out[11] ;
        //document.getElementById('eOffstS').value = out[12] ;
        //document.getElementById('eGrip1Type').value = out[13] ;
        //document.getElementById('eGrip2Type').value = out[14] ;
        document.getElementById('m1jl').value = out[15] ;
        document.getElementById('m1ld').value = out[16] ;
        document.getElementById('m2jl').value = out[17] ;
        document.getElementById('m2ld').value = out[18] ;
      }
    }
  };
  xhttp.open("GET", "http://127.0.0.1:8080/PartInfo.txt", true);
  xhttp.setRequestHeader('cache-control', 'no-cache, must-revalidate, post-check=0, pre-check=0');
  xhttp.setRequestHeader('cache-control', 'max-age=0');  
  xhttp.setRequestHeader('expires', '0');
  xhttp.setRequestHeader('expires', 'Tue, 01 Jan 1980 1:00:00 GMT');
  xhttp.setRequestHeader('pragma', 'no-cache');
  xhttp.send();
};

Parsing Array To Input Value (Global .JS file to Specific HTML Page)

1 Answers1