Generate JSON from a URL and Search by location

Question

Good note to everyone, I wonder if there is any possibility to show a JSON list from a URL and in that same url generate the following values: nmConvenienced, listEspeciality, listEndereco.

I tried to use the following script but was unsuccessful:

<script>

// Users data in json format
var userData = URL: "http://url.com/arquivo.json" };
// user's input for search
var searchVal = '';

$(function(){
      // if text box value is not null, then darken reset icon
      $(".slinput input").keyup(function(){
        var val = $(this).val();   
        if(val.length > 0) {
           $(this).parent().find(".right-icon").css('color','#555');
        } else {
          $(this).parent().find(".right-icon").css('color','#ccc');
        }
      });

      // if user click on reset icon, clear text field
      $(".slinput .right-icon").click(function(){
        $(this).parent().find("input").val('');
        $(this).css('color','#ccc');
        loadData(userData);
      });

      loadData(userData);
});

// Displaying Information to Users
function loadData(data) {
    var htmlData = '';
    $.each(data, function(index, val){
        htmlData += '<div class="media user">'+
        '  <div class="media-left">'+
        '    <a href="#">'+
        '      <img class="media-object" src="'+val.listaImagem+'" alt="...">'+
        '    </a>'+
        '  </div>'+
        '  <div class="media-body">'+
        '    <h4 class="media-heading">'+val.nmConveniado+'</h4>'+
        '    '+val.place+
        '  </div>'+
        '</div>';
    });
    $("#users").html(htmlData);
}

// Search users data based input search keyword
function searchUsers() {
    var val = $("#searchInput").val();
    if(val == searchVal) {
        return; 
    } else {
        searchVal = val;
        var searchResults = {};
        searchResults = [];
        $.each(userData, function(i, v) {
            if (v.nmConveniado.toLowerCase().indexOf(val) != -1) {
                searchResults.push(v);  
            }
        });
        loadData(searchResults);    
    }
}
</script>

In the same file I will try to filter the list by name, city, category.

Answer 1

You need to start calling the URL via ajax, var userData = URL: "http://url.com/arquivo.json" }; will not work, with jQuery gets like this:

 var userData = '';

 $.ajax({
    url: "http://url.com/arquivo.json",
    success: function (json) {
        userData = JSON.parse(json);
    },
    error: function (xhr) {
        console.log(xhr);
    }
});

What we do here is call the URL and get the answer at success, in the successful case, or error, case of any problem. The function in success will parse the URL return and save to variable userData as an object.