Cannot match JSON array key: value pair to extract value from another key:value pair in same array 1

[waubain]

I am having difficulty with a Javascript loop syntax. I have a form and when the user select an date from an select input a onchange function is triggered. I need to loop though the array find the key:value pair that matches what was selected and populate the next input element with the value from the array. I have trouble wrapping my mind around Javascript.

Here is my array which is saved in a text file 'meetinfo_array.txt'.

[{"meetdate":"2019-04-18","topic":"TBA, "handout":"abc"},
 {"meetdate":"2019-05-02","topic":"TBA","handout":"xyz"}]

So if the use selected the date "2019-04-18", then in the next input textfield id="ho_acronym" should be populated with the value "abc".

Here script section. The loop always returns "Not Found".

<script>
	function getAcronym() {
        	var x = document.getElementById('meetingdate');
                var mdate = x.value; 
                            
                var file = "meetinfo_array.txt";  
                var rawFile = new XMLHttpRequest();
                rawFile.open("GET", file, false);
                rawFile.onreadystatechange = function ()
                {
                	if(rawFile.readyState === 4)
                        {
                        	if(rawFile.status === 200 || rawFile.status == 0)
                                {       
                                	var arr = JSON.parse(rawFile.responseText);
                                        }                                        
                                        for(var i=0; i<arr.length; i++) {
                                            if (arr['meetdate'] == mdate) {
                                                document.getElementById("ho_acronym").value = ho;
                                                }
                                            else {
                                                //for testing
                                                alert("Not found");
                                                {break};
                                            }
                                            }
                                    }
                                }
                            rawFile.send(null);
                            
                            }   
</script>

Here is the chunk of text from the form HTML

<select class="quform-tooltip" id="meetingdate" name="meetingdate" title="Meeting Date" onchange="getAcronym()">
                                                    
<?php
//Retrieve the data from our text file.
                                                            
$fileContents = file_get_contents('meetinfo_array.txt');
//Convert the JSON string back into an array.
$info_decoded = json_decode($fileContents, true);
                                                        
// more code to make list for option values ...
?>
<option value="<?php echo $item;?>"><?php echo date("F d, Y", strtotime($item)); ?></option> <?php } ?>
                                                        
                                                        
<script>
	function getAcronym() {
        	var x = document.getElementById('meetingdate');
                var mdate = x.value; 
                            
                var file = "meetinfo_array.txt";  
                var rawFile = new XMLHttpRequest();
                rawFile.open("GET", file, false);
                rawFile.onreadystatechange = function ()
                {
                	if(rawFile.readyState === 4)
                        {
                        	if(rawFile.status === 200 || rawFile.status == 0)
                                {       
                                	var arr = JSON.parse(rawFile.responseText);
                                        }                                        
                                        for(var i=0; i<arr.length; i++) {
                                            if (arr['meetdate'] == mdate) {
                                                document.getElementById("ho_acronym").value = ho;
                                                }
                                            else {
                                                //for testing
                                                alert("Not found");
                                                {break};
                                            }
                                            }
                                    }
                                }
                            rawFile.send(null);
                            
                            }   
</script>
                        
<input type="lctext" name="ho_acronym" id="ho_acronym" />

Thanks for any help

 

[feherke]

Hi

From your example looks like arr is an array of objects, so should be :

    rawFile[teal].[/teal]onreadystatechange [teal]=[/teal] [b]function[/b][teal]() {[/teal]
        [b]if[/b] [teal]([/teal]rawFile[teal].[/teal]readyState [teal]===[/teal] [purple]4[/purple] [teal]&&[/teal] rawFile[teal].[/teal]status [teal]===[/teal] [purple]200[/purple][teal]) {[/teal]
            [b]var[/b] arr [teal]=[/teal] JSON[teal].[/teal][COLOR=orange]parse[/color][teal]([/teal]rawFile[teal].[/teal]responseText[teal]);[/teal]

            [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal];[/teal] i[teal]<[/teal]arr[teal].[/teal]length[teal];[/teal] i[teal]++) {[/teal]
                [b]if[/b] [teal]([/teal]arr[teal][[/teal]i[teal]].[/teal]meetdate [teal]==[/teal] mdate[teal]) {[/teal]
                    document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]"ho_acronym"[/green][/i][teal]).[/teal]value [teal]=[/teal] arr[teal][[/teal]i[teal]].[/teal]handout[teal];[/teal]
                [teal]}[/teal]
            [teal]}[/teal]
        [teal]}[/teal]
    [teal]}[/teal]

Additional notes :
[ul]
[li]I see no reason for assuming anything good when rawFile.status is 0[/li]
[li]Only loop over result if rawFile.status is 200[/li]
[li]The Not found [tt]alert()[/tt] is a bit exaggerated there, as even if a matching date will be found, will still alert for all others[/li]
[li]That [tt]break[/tt] looks bad there[/li]
[li]That ho is unknown there, I assume you need the handout[/li]
[/ul]

Future advice :
[ul]
[li]Make arr a global variable and request the file only if arr was not populted yet on a previous date change[/li]
[/ul]


Feherke.
feherke.github.io

 

[waubain]

Thank you for the corrections and additional notes and future advice.