Search multiple GeoJSON feature properties in OpenLayers?

Question

I have a code to do the search function, i got the results from var props = results[0].properties; but for if not work, I don't know why.

How can I fixed and zoom to result?

This is my code:

    var queryInput = document.getElementById('query');
    var searchButton = document.getElementById('search');
    var resultSpan = document.getElementById('span');

function search(query) {
        resultSpan.innerHTML = 'Searching ...';
        fetch('http://localhost:8081/geoserver/vietnam/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=vietnam%3Ahtgovap&maxFeatures=50&outputFormat=application%2Fjson&' + query)
          .then(function (response) {
            return response.json();
          })
          .then(function (json) {
            var results = json.features;
            var props = results[0].properties;
            console.log(props);
            if (props && props.length > 0) {
              for (let i = 0, ii = props.length; i < ii; i++) {
                var result = props[i];
                if (result) {
                  var code = result.shthua;
                  var name = result.shbando;
                  if (
                    code &&
                    code.length > 0
                  ) {
                    setProjection(code, name);
                    return;
                  }
                }
              }
            }
            setProjection(null, null);
          });
      }
    function setProjection(code, name){
        if(code == null, name == null){
            resultSpan.innerHTML = 'Không có thông tin số tờ này, thử lại...!'
            return
        }
        resultSpan.innerHTML = 'Số tờ: ' + code  +' '+ 'Diện tích: ' + name;
    }
    searchButton.onclick = function (event) {
        search(queryInput.value);
        event.preventDefault();
    };

This is my sample JSON from url:

{"type":"FeatureCollection","features":[{"type":"Feature","id":"htgovap.84500","geometry":{"type":"MultiPolygon","coordinates":[[[[106.64385396,10.83672494],[106.6438059,10.83679985],[106.6438332,10.83681658],[106.6438839,10.83673733],[106.64385724,10.83671978],[106.64385396,10.83672494]]]]},"geometry_name":"geom","properties":{"id":"HT_GOVAP.84500","soqd":"2145/QĐ-UBND","doan":"Do an dieu chinh quy hoach","shthua":93,"shbando":238,...

Answer 1

Feature properties props is not an array but object, so you don't iterate through properties the same way as through array elements (see https://www.w3schools.com/js/js_object_properties.asp). You have to use for (let variable in object) syntax.

But since in your case you don't need all the properties, but only specific two shthua and shbando, there is not need to iterate through all the properties, you just get desired two properties. Also, since shthua is number, you can't check for it's length.

In your case relevant part of the code could then look like this:

if (props) {
  var code = props.shthua;
  if (code) {
    var name = props.shbando;
    setProjection(code, name);
  }
}

And for the future, this is not really a GIS related question, but pure JS one, so in the future you should post such questions on StackOverflow site.