CODEWITHSUNDEEP
javascriptjqueryajax
Gabriel Machado
Gabriel Machado

Reputation: 155

Problems when trying to fill select tag with AJAX call

I'm working on a small project for controlling libraries and I need fill a select tag with all libraries on the database that I have. For that, I've created a WebService which contains a web method called GetBibliotecas, responsible for returning all the libraries in a JSON format; its code will be shown next:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class BibUtil : WebService
{
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string GetBibliotecas()
    {
        return JsonConvert.SerializeObject(DAOFactory.GetInstance(DAOFactory.DAOType.Biblioteca).Select());
    }
}

That's the result returned from the WebMethod:

[{"IdBiblioteca":3,"Nome":"Biblioteca FESO Campus","Endereco":"Avenida Oliveira Botelho"},{"IdBiblioteca":5,"Nome":"Biblioteca FESO Pro-Arte","Endereco":"Rua Exemplo"},{"IdBiblioteca":11,"Nome":"Biblioteca FESO Quinta do Paraíso","Endereco":"Avenida da Prata"},{"IdBiblioteca":12,"Nome":"Exemplo Library","Endereco":"Rua EX"}]

On my view page, I'm trying to use AJAX in order to consume the WebService method asynchronously, right after the page loads. Below is the snippet I coded:

<script>
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "../Services/BibUtil.asmx/GetBibliotecas",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('#ddlLibraries').get(0).options.length = 0;
            $('#ddlLibraries').get(0).options[0] = new Option("Selecione uma biblioteca", "-1");

            $.each(data.d, function (index, item) {
                $('#ddlLibraries').get(0).options[$("#ddlLibraries").get(0).options.length] = new Option(item.Display, item.Value);
            });
        }
    });
});

But when the page is rendered on the browser, some strange error appears on the Console: 

Uncaught TypeError: Cannot use 'in' operator to search for '325' in [{"IdBiblioteca":3,"Nome":"Biblioteca FESO Campus","Endereco":"Avenida Oliveira Botelho"},{"IdBiblioteca":5,"Nome":"Biblioteca FESO Pro-Arte","Endereco":"Rua Exemplo"},{"IdBiblioteca":11,"Nome":"Biblioteca FESO Quinta do Paraíso","Endereco":"Avenida da Prata"},{"IdBiblioteca":12,"Nome":"Exemplo Library","Endereco":"Rua EX"}]

My intention is using the IdBiblioteca like an ID value for the dropdown (select tag) and show the option itself using the library name (Nome). What is wrong with the code?

Thanks.

Upvotes: 0

Views: 40

Answers (1)

charlietfl
charlietfl

Reputation: 171669

No need to look for the index and length of options each time. Can create all the options and then use html() or append individually after emptying the container

success: function (data) {
    // empty the <select>
    var $select = $('#ddlLibraries').empty();

    // add default to array
    data.d.unshift({
        Nome: "Selecione uma biblioteca",
        IdBiblioteca: -1
    });
    // creaate and append options
    $.each(data.d, function (index, item) {
        var $option = $('<option>').text(item.Nome).val(item.IdBiblioteca);
        $select.append($option);
    });
}

Was confused by your code using properties to create new Option that didn't exist in data shown

Upvotes: 1

Related Questions