Problemas con array AJAX JQUERY

Cuento con un Array PHP con la siguiente estructura

Código :

[{"id":"0","valor":"Seleccionar..."},
 {"id":"493","valor":"Río Grande"},
 {"id":"494","valor":"Ushuaia"},
 {"id":"495","valor":"Islas del Atlántico Sur"},
 {"id":"496","valor":"Antártida Argentina"}]

Esta es la funcion AJAX JQUERY que estoy utilizando

Código Javascript :

$(function(){
     $('select').change(function(){
      var id = $(this).attr('id');
      var select_val = $("select option:selected ").val();
      
      $.post('pagina1.php', { pro : select_val }, function(respuesta) {
         alert (respuesta); // podemos ver la estructura del array
         var newSelect = '';
         for (var a = 0; a < respuesta.length; a++){
          
          html= '<ul>'+
                     '<li>ID = ' + respuesta[a].id + '</li>'+
                     '<li>Valor = ' + respuesta[a].valor + '</li>'+
                   '</ul>';
         }
         
         $('#resultados').append(html);   
      });
   });
});

Si yo hago un alert de la variable respuesta, puedo ver lo que me devuelve el PHP ahora como hago para mostrar el ID o el VALOR de una posición X del array con Jquery

Intente utilizando estas formas pero no funciona

Código :

respuesta[a].id
respuesta[a].valor


respuesta.id[a]
respuesta.id[valor]

respuesta[a][0]
respuesta[a][1]

console.log(respuesta[a].id) me muestra undefined
console.log(respuesta[a].valor) me muestra undefined

Cuando hago respuesta.length (array.length) es como si me contaría los caracteres, como si todo fuera una gran palabra y no un array.

SOLUCIONADO!

Efectivamente tomaba lo que me devolvía el PHP como un String y no un objeto.
Agregando esto convierte el String en un objeto con el cual podemos trabajar.

JSON.parse();