Se o seu retorno é uma lista de objetos:
[
{subcategoria: "Artesanato"},
{subcategoria: "Esculturas"},
{subcategoria: "Ferramentas"},
{subcategoria: "Livros"}
];
Não faz sentido você interar sobre a propriedade subcategoria
, pois ela só existe nos elementos pertencentes à lista, como você fez em:
$.each(retorno.subcategoria, function(i, val){
var subcategoria = '<option value="'+retorno.subcategoria[i].subcategoria+'">'+retorno.subcategoria[i].subcategoria+'</option>';
$("select[name=subcategoria]").html(subcategoria);
});
O correto é interrar sobre o próprio retorno e acessar a propriedade subcategoria
do valor presente na lista:
$.each(retorno, function(i, val) {
// -----------^
var subcategoria = '<option value="'+val.subcategoria+'">'+val.subcategoria+'</option>';
// ----------------------------------^ --------------^ ----^ --------------^
$("select[name=subcategoria]").append(subcategoria);
// ----------------------------^
});
Nota: Os comentários inseridos no código no formato ---^
indicam os pontos em que aconteceram as mudanças em relação ao código original e, por isso, merecem maior atenção.
Perceba também que é necessário substituir o método html
pelo append
, pois o primeiro sempre sobrescreve o valor atual e, se usado, apenas apareceria a última subcategoria da lista. De forma a aparecer todas, usa-se o método append
, que apenas insere o novo valor ao final do valor atual.
Exemplo
const RETORNO = '[{"subcategoria": "Artesanato"},{"subcategoria": "Esculturas"},{"subcategoria": "Ferramentas"},{"subcategoria": "Livros"}]';
$(() => {
var list = $("#list");
$.each(JSON.parse(RETORNO), (key, value) => {
//-----^ Aqui você converte seu retorno, que é uma string, para objeto
let option = "<li>" + value.subcategoria + "</li>";
list.append(option);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list"></ul>