Iterar Objeto Javascript para formar un string

Question

Tengo la siguiente llamada ajax

var listaTurnos = []
  $(document).ready(function() {
    $.ajax({
        type: 'POST',
        url: 'ajax/turnos2.ajax.php',
        dataType: "json",
        data: { item: "a" },
        success: function(data) {
            data.forEach(e => {
                listaTurnos.push(e["datos"])
            });
        },
        error: function(data) {
        }
    });
});

La cosa es que no entiendo el tema de la asincronia de ajax, porque si yo tiro un console.log(listaTurnos) recibo lo siguiente:

[]
0: "{"title":"Agustin Guerra","start":"2020-03-12T10:30:00","end":"2020-03-12T11:30:00"}
↵"
1: "{"title":"Mariel Guerrieri","start":"2020-03-15T09:30:00","end":"2020-03-15T10:30:00"}
↵"
length: 2
__proto__: Array(0)

Pero si yo en cambio pusiera

console.log(listaTurnos.length)

El resultado de la consola es 0.

>En un principio yo realice esta pregunta para saber cómo recorrer un objeto. Lo extraño es que otras veces he logrado hacerlo, y ahora no funcionaba. Preguntando por ahi me dijeron que ajax como es asincronico, en momentos va a cargar mi variable y en otros no. Quisiera poder manejar eso

Este era mi objetivo principal, pero ahora la idea es entender cuando ajax hace lo que hace y porque

Quisiera, a partir de este objeto, obtener un string que sea:

[
    {
        title: 'Agustin Guerra',
        start: '2020-03-12T10:30:00',
        end: '2020-03-12T11:30:00'
    },
    {
        title: 'Mariel Guerrieri',
        start: '2020-03-15T09:30:00',
        end: '2020-03-15T10:30:00'
    }

]

Intento recorrer con un foreach por ejemplo

   listaTurnos.forEach(e => {
    console.log(e)
});

Y no retorna nada. Yo quisiera recorrerlo para obtener al menos sus elementos de la forma {"title":"Agustin Guerra","start":"2020-03-12T10:30:00","end":"2020-03-12T11:30:00"} y despues trabajarlos con algun metodo de reemplazo de caracteres para llegar a mi objetivo. La cosa es que no estoy dandome cuenta de que método utilizar para iterar el objeto.

EDIT: dentro del success de ajax, si hago console.log(data) obtengo

(2) [{…}, {…}]
0: {id: "1", datos: "{"title":"Agustin Guerra","start":"2020-03-12T10:30:00","end":"2020-03-12T11:30:00"}
↵"}
1: {id: "2", datos: "{"title":"Mariel Guerrieri","start":"2020-03-15T09:30:00","end":"2020-03-15T10:30:00"}
↵"}

Answer 1

no entiendo muy bien que es lo que quieres hacer. Dices que quieres un string con esa estrucutra, pero ya la tienes. O solo quieres mostrarlo con ese formato? Si quieres imprimir tu arreglo de objetos en ese formato puedes usar

const formato = JSON.stringify(arr, null, 2);
console.log(formato);
// te genera este string
[
    {
        title: 'Agustin Guerra',
        start: '2020-03-12T10:30:00',
        end: '2020-03-12T11:30:00'
    },
    {
        title: 'Mariel Guerrieri',
        start: '2020-03-15T09:30:00',
        end: '2020-03-15T10:30:00'
    }

]

Eso le daria el formato que quieres a tu arreglo.

Pero si quieres iterar los objetos y usar sus propiedades dentro del arreglo podrias usar un for..of

for(let item of listaTurnos) {
  console.log(item.title);
  console.log(item.start)
  // etc etc
}

O el mismo forEach que estas utlizado

   listaTurnos.forEach(e => {
    console.log(e.title)
   // etc
});

Answer 2

Nueva respuesta

Las peticiones a Ajax son asíncronas. En pocas palabras significa que cuando se lanza una petición Ajax, Javascript abre un hilo aparte para procesar esa petición y no bloquear la interfaz del usuario (otras cosas pueden seguir sucediendo mientras la petición es procesada).

Cuando la petición termina, en la pila de llamadas de Javascript se registra una función con el resultado de esa petición. Es por ese motivo por el que no puedes asignar directamente los resultados de la petición Ajax a una variable pre-existente. Tendrías que agregar un callback (otra función) para que la función que registre Ajax cuando termine le pase los datos.

Este es uno de los rompecabezas que vienen a resolver las Promesas en Javascript. Y jQuery, a través de done ¹ implementa una especie de Promesa (llamada Deferred), por lo que puedes fácilmente pasar datos de la petición a otra función de forma relativamente fácil.

Veamos un ejemplo:

$(function() { /*Esto sustituye a document.ready, obsoleto de jQuery 3*/
  var listaTurnos = [];
    /*
       Para que se vea más claro 
       crearemos primero una referencia a Ajaz
       y luego le agregaremos las funciones
    */
    var mAjax = $.ajax({
      url: 'ajax/turnos2.ajax.php',
      method: 'POST',
      data: { item: "a" },
      dataType: 'json' 
    });
    /*
       Cuando la petición termine se registrará done
       y cuando se registre done invocará 
       a readData pasándole la respuesta
    */
    mAjax.done(function(data) {
      /*data puede usarse aquí si se quiere*/
      readData(data);
    });
    /*
        Conviene otorgar también función fail a nuestras peticiones Ajax
        Aquí se controlará la respuesta cuando ésta falle
        OJO: aquí fail se refiere a fallos de red u otros, no a fallos de lógica
    */

    mAjax.fail(function(jqXHR, textStatus) {
      alert("Error en la petición: " + textStatus);
    });

  /*
     Función que sirve como callback
  */
  function readData(data) {
    /*
      La lectura siempre depende de cómo estén
      estructurados los datos
    */
    data.datos.forEach(e => {
      listaTurnos.push(e)
    });
    console.log(listaTurnos);
  }

});

Prueba

Hagamos una prueba funcional, con un código parecido al tuyo:

$(function() { /*Esto sustituye a document.ready, obsoleto de jQuery 3*/
  var listaTurnos = [];
    /*
       Para que se vea más claro 
       crearemos primero una referencia a Ajaz
       y luego le agregaremos las funciones
    */
    var mAjax = $.ajax({
      url: 'http://openlibrary.org/books/OL1M/lists.json',
      method: 'GET',
      /*data: { item: "a" },*/
      dataType: 'json' 
    });
    /*
       Cuando la petición termine se registrará done
       y cuando se registre done invocará 
       a readData pasándole la respuesta
    */
    mAjax.done(function(data) {
      /*data puede usarse aquí si se quiere*/
      readData(data);
    });
    /*
     Conviene otorgar también función fail a nuestras peticiones Ajax
     Aquí se controlará la respuesta cuando ésta falle
     OJO: aquí fail se refiere a fallos de red u otros, no a fallos de lógica
    */

    mAjax.fail(function(jqXHR, textStatus) {
      alert("Error en la petición: " + textStatus);
    });


  function readData(data) {
    data.entries.forEach(e => {
      listaTurnos.push(e)
    });
    console.log(listaTurnos);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

Notas

1. Aprovecho para decir que tanto document.ready con success y error se consideran ya obsoletos. Se recomienda cambiarlos por fuction, done y fail respectivamente, como se ha hecho en el código de ejemplo.

---

@deprected

El problema parece ser que tu objeto no es un JSON válido. Un JSON válido debe tener las claves y valores entre comillas dobles, por ejemplo: "title" : "Agustin...", esto no es válido: title: "Agustin...", esto tampoco: 'title':'Agustin'.

Veamos que tu código funciona si el JSON fuese válido. No siempre es obligatorio parsear el JSON, por ejemplo en una respuesta Ajax donde has puesto dataType: 'json' si luego intentas parsear, dará error. En ese caso, puedes pasar a usar el JSON con tal si tener que usar JSON.parse(respuestaAjax)

var listaTurnos =
  `
[
    {
        "title": "Agustin Guerra",
        "start": "2020-03-12T10:30:00",
        "end": "2020-03-12T11:30:00"
    },
    {
        "title": "Mariel Guerrieri",
        "start": "2020-03-15T09:30:00",
        "end": "2020-03-15T10:30:00"
    }
]`;

/*
  Parseamos a JSON, si es necesario
  NO siempre lo es
*/
var mJson = JSON.parse(listaTurnos);


/* Tu código */

mJson.forEach(e => {
  console.log(e)
});

/* Imprimir cada objeto con forma k: value */
for (var [key, item] of Object.entries(mJson)) {
  for (var [k, v] of Object.entries(item)) {
    console.log(`${k}: ${v}`);
  }
}