title: How to get Mapbox Geocoder result place/country text names into a JavaScript function?
body: <p>When the Mapbox geocoder returns a search result, I need to get the city(place name) and country name text and put them into a text field on the web page.</p>
  
  <p>This returns the data to the console.</p>
  
  <pre><code>&lt;script&gt;
  geocoder.on('results', function(results) {
     console.log(results);
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>A geocoder search for New york returns this GeoJSON object data. I need to get the country text data when a search result is returned and update a text field on the web page with the country name text.</p>
  
  <pre><code>&lt;script&gt;
  features: Array(5)
  0:
  bbox: (4) [-74.2590879797556, 40.477399, -73.7008392055224, 40.917576401307]
  center: (2) [-73.9808, 40.7648]
  context: Array(2)
  0: {id: "region.14044236392855570", short_code: "US-NY", wikidata: "Q1384", text_en-GB: "New York", language_en-GB: "en", …}
  1:
  id: "country.9053006287256050"
  language: "en"
  language_en-GB: "en"
  short_code: "us"
  text: "United States of America"
  text_en-GB: "United States of America"
  wikidata: "Q30"
  __proto__: Object
  length: 2
  __proto__: Array(0)
  geometry: {type: "Point", coordinates: Array(2)}
  id: "place.15278078705964500"
  language: "en"
  language_en-GB: "en"
  matching_place_name: "New York, New York, United States of America"
  matching_text: "New York"
  place_name: "New York City, New York, United States of America"
  place_name_en-GB: "New York City, New York, United States of America"
  place_type: ["place"]
  properties: {wikidata: "Q60"}
  relevance: 1
  text: "New York City"
  text_en-GB: "New York City"
  type: "Feature"
  __proto__: Object
  &lt;/script&gt;
  </code></pre>
  
  <p>The below code updates the text field. However, not with the actual data from the above data. How do I query/access the actual result data after every search to update the text field?</p>
  
  <pre><code>&lt;script&gt;
  //listen for a search result
  document.querySelector('.mapboxgl-ctrl-geocoder--input').addEventListener('change', titleTest);
  
  function titleTest() {
  
  var countryName = {
    id: "country.9053006287256050",
    language: "en",
    language_enGB: "en",
    short_code: "us",
    text: "United States of America",
    text_enGB: "United States of America",
    wikidata: "Q30"
  }
  
    //update the input field
  document.getElementById('titleinput').value = countryName.text.toUpperCase(); 
    //add to map
  document.getElementById("map_title").innerHTML = countryName.text.toUpperCase();
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The below line returns the value for 'place_name: "New York City, New York, United States of America"'</p>
  
  <pre><code>&lt;script&gt;
   let str = document.querySelector('.mapboxgl-ctrl-geocoder--input').value;
  &lt;/script&gt;
  
  </code></pre>
  
  <p>Let's try it in the script below..</p>
  
  <pre><code>&lt;script&gt;
  // listen for a search
  document.querySelector('.mapboxgl-ctrl-geocoder--input').addEventListener('change', updateTitle);
  
  function updateTitle() {
  
   //get the text value for place
   let str = document.querySelector('.mapboxgl-ctrl-geocoder--input').value;
  
   //split the string
   let countryName = str.split(", ");
  
   //loop over array items  
   for(var i = 0; i &lt; countryName.length; i++)
  {
     console.log(countryName[i]);
  }
  
    //update the input field
    document.getElementById('titleinput').value = countryName[1].toUpperCase();
   //add to map
    document.getElementById("map_title").innerHTML = countryName[1].toUpperCase();
  &lt;/script&gt;
  </code></pre>
  
  <p>The above code gets me the mapbox suggestion [place_name] as a string ("New York City, New York, United States of America"), which I then split to a list, and iterate over. It works well for place/city as this array position is always first [0]. However, it doesn't work well for getting the country name, which isn't always in the same position in the string, or the list. For example, if I set the countryName array value to [1] and search for 'London', the second item is 'Greater London', 'England' was [2] and 'United Kingdom' was [3], whereas if I search for 'Paris', [1] gives me 'France'.</p>
  
  <p>I need to get the country name text when the geocoder returns a result so I can add it to the text field. How do I get the country name text from the object after every search result? Does anyone know? </p>