1

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,...
0

1 Answer 1

2

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.

4
  • Thanks you for the reminder. I fixed my code in your way but the result when search of shthua and shbando are not showing in html resultSpan.innerHTML = 'Số tờ: ' + code +' '+ 'Diện tích: ' + name;
    – Jayzz
    Commented Aug 12, 2022 at 1:40
  • I modified the code a bit, it works but only 1 result is always showing even when queryInput is empty and can't search data in shthua and shbando
    – Jayzz
    Commented Aug 12, 2022 at 1:55
  • All these are really JS questions, and as such more suitable for StackOverflow site.
    – TomazicM
    Commented Aug 12, 2022 at 9:11
  • Thanks for your patience and reply, sir. I will post this question to StackOverflow ♥
    – Jayzz
    Commented Aug 12, 2022 at 9:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.