AJAX - Cargar 2 archivos json en el mismo html

 
Vista:
sin imagen de perfil
Val: 11
Ha aumentado 1 puesto en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar 2 archivos json en el mismo html

Publicado por Rafael Marrero (5 intervenciones) el 18/01/2020 15:52:39
Hola a todos, soy más que todo diseñador e ilustrador con experiencia en programación en Visual Basic y C# pero me toco hacer una página en php donde debo cargar dinámicamente 2 archivos json mediante ajax en el mismo html y la cuestión es que solo me carga uno. Que le debo modificar al código para que me carguen ambos? Dejo los fragmentos de código por acá, agradezco muchísimo su ayuda, Gracias

Este es el link de la pagina http://info-tickets.es/index54.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script>
    var count = 0;
 
    $(document).ready(function(){
        //fetchDataAndDisplay();
        newFunction();
    });
 
    function newFunction() {
        axios.get('https://intranet.info-tickets.es/list_categories').then((response) => {
            var data = response.data;
            var start = count > 0 ? 5 * count : count;
            var end = start + 5;
            var str = '';
            let url = "https://intranet.info-tickets.es/images/categories/";
            for(var ii=start; ii<end; ii++){
                str += '<div class="item-details" align="center">' +
                        '<div class="circle-border zoom-in" align="justify" style="color: #F29600; font-size: 25px"><img src='+url+data[ii].image+' style="width: 170px; height: 170px"></div><br><br>' +
                          data[ii].name + '<br><br>' +
                          data[ii].description +
 
                        '<div style="visibility: hidden">' + data[ii].user_id +
                        '' + data[ii].id + '</div>' +
 
 
 
                        '</div>';
            }
 
            if(start == data.length){
                count = 0;
                $(".display-data").empty();
                $(".display-data").append("List Traversed. Start over!");
                return;
            }
 
            count++;
            $(".display-data").empty();
            $(".display-data").append(str);
        }).catch((error) => {
            console.log(error);
        });
    }
 
 
</script>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script>
var count = 0;
 
$(document).ready(function(){
    //fetchDataAndDisplay();
    newFunction();
});
 
function newFunction() {
    axios.get('https://intranet.info-tickets.es/getServices/1').then((response) => {
        var data = response.data;
        var str = '';
        let url = "https://intranet.info-tickets.es/images/services/";
 
 
        for(var i=0; i<data.length; i++){
            str += '<div class="item-details" align="center">' +
                    '<div align="center" style="color: #F29600; font-size: 25px"><img src='+url+data[i].image_service+' style="width: 370px; height: 370px"></div><br><br>' +
 
                      data[i].name + '<br><br>' +
                      data[i].description +
 
                    '<div style="visibility: hidden">'+ data[i].category_id +
                    '' + data[i].user_id +
                    '' + data[i].id + '</div>' +
 
 
 
                    '</div>';
        }
 
        if(data == data.length){
            count = 0;
            $(".display-data").empty();
            $(".display-data").append("List Traversed. Start over!");
            return;
        }
 
        count++;
        $(".display-data").empty();
        $(".display-data").append(str);
    }).catch((error) => {
        console.log(error);
    });
}
 
 
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de José Manuel
Val: 21
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar 2 archivos json en el mismo html

Publicado por José Manuel (4 intervenciones) el 20/01/2020 12:22:12
Hola Rafael:

Jquery utililza el método .ready para ejecutar scripts en cuanto el DOM de la página haya sido cargado por el navegador. Hecho esto, se ejecutará la función newFunction() que has implementado. Sin embargo, ¿cuál newFunction()? En ambos scripts se llama igual, la segunda vez que intentas definirla, ¡ya está definida!

No estoy seguro al 100% de si ese es el problema que tienes pero seguro que problemas si que te va a dar. ¿Has mirado la consola de JavaScript para ver si te lanza errores?

Posible soluciones:

1.- La más fácil: usa dos funciones con nombres distintos.

2.- La más adecuada: modifica la función newFunction para que acepte la URL que consultas por AJAX como parámetro y la lógica de la función se adapte a ello.

Dinos algo. Un saludo,
https://obelearningservices.com/blog/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 11
Ha aumentado 1 puesto en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar 2 archivos json en el mismo html

Publicado por Rafael (5 intervenciones) el 20/01/2020 15:18:19
Hola José Manual gracias por responderme. En verdad he realizado muchisimas pruebas, entre ellas como tu mencionastes cambiar el nombre de la función para que no este en los 2 iguales pero todas fallaron, siempre pasa que o carga un archivo json o el otro pero nunca ambos como deberia ser. Quizás lo que hay que cambiar en el código es muy simple pero no programo en php ni en javascript por eso se me dificulta mas de la cuenta.

Dejo por acá el archivo adjunto del html por si puede ser útil. En las lineas 206 y 305 se encuentran las lineas de código correspondiente.

Agradecido infinitamente por cualquier ayuda que puedas darme
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de José Manuel
Val: 21
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar 2 archivos json en el mismo html

Publicado por José Manuel (4 intervenciones) el 20/01/2020 19:08:14
Hola:

Te adjunto el fichero que me has enviado cambiando el nombre de las funciones y funciona, ejecuta ambas llamadas AJAX que devuelven un valor.

Dale un repaso porque tienes diferentes errores JavaScript (adicionalmente). Un saludo,
https://obelearningservices.com/blog/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 11
Ha aumentado 1 puesto en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar 2 archivos json en el mismo html

Publicado por Rafael Marrero (5 intervenciones) el 21/01/2020 12:46:55
Hola amigo buenos dias! la vida sigue igual jejeje, ve que la información que carga del json es la misma en las 2 secciones, carga el archivo que corresponde a la linea de codigo 314 y el archivo que debe cargar de la linea de codigo 214 no lo hace. Te dejo este link donde se puede visualizar en la seccion de "Categories" el archivo json que debe ser cargado http://info-tickets.es/index53.html . Muchisimas gracias por tu ayuda
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de José Manuel
Val: 21
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar 2 archivos json en el mismo html

Publicado por José Manuel (4 intervenciones) el 27/01/2020 13:56:36
Hola:

Disculpa, me ha sido imposible responder antes. Con el código que te adjunté en mi anterior mensaje, a mí me funciona, carga dos arrays de objetos JSON totalmente distintos. Te ajdunto una captura.

Un saludo,
https://obelearningservices.com/blog/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 11
Ha aumentado 1 puesto en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar 2 archivos json en el mismo html

Publicado por Rafael (5 intervenciones) el 28/01/2020 13:10:57
Hola José Manual gracias por responderme de nuevo. En verdad no se porque en la consola la muestra como 2 arrays distintos pero la verdad es que cargan en la 2 secciones el mismo archivo json. Fijate en este link en la sección de "Categories" se puede visualizar la información que debe ser cargada de uno de los archivos json http://info-tickets.es/index53.html#service y en este en la sección "Service" el otro archivo json que debe ser cargado http://info-tickets.es/index54.html . En el archivo que me enviastes carga en la 2 secciones el link del archivo json que corresponde a la linea de codigo 314. También te mando un par de imagenes donde puedes verlo.

Muchisimas gracias por tu ayuda, muy pero muy agradecido
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de José Manuel
Val: 21
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar 2 archivos json en el mismo html

Publicado por José Manuel (4 intervenciones) el 30/01/2020 12:08:41
Hola Rafael:

Discúlpame, debo estar muy "espeso" Veamos, en la URL http://info-tickets.es/index54.html, tanto en Categoríes como Services aparece lo mismo. Sin embargo, sin voy a http://info-tickets.es/index53.html#service, aparecen las categorías como deben aparecer y los servicios, más abajo, como también deben aparecer. ¿Es eso?

Sea como sea, estoy haciendo más pruebas con los fuentes que me has pasado. Cuando accedo directamente a la URL de cada servicio, los devuelve diferentes: categorías las devuelve y servicios los suyos. Es decir, no es problema de la petición de los servicios; los devuelve bien. El problema está entonces en lo que se hace con la información devuelta por ellos.

Y efectivamente eso creo que es. Tienes dos nodos iguales en tu HTML:

1
2
3
<div class="ajax-container">
   <div class="display-data" align="center"></div>
</div>

Tus peticiones AJAX a estos servicios modifican el elemento cuyo atributo class contenga el valor display-data. Puesto que la de servicios es la última que se ejecuta, machaca a la primera. Solución: en vez de usar class, ¿por qué no usas un id diferente para cada uno? De esa forma no machacarán.

Lógicamente con lo que tengo no puedo asegurar al 100% que sea eso pero apuesto por ello. Te adjunto otra vez index54.html como .RAR.

Un saludo,
https://obelearningservices.com/blog/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 11
Ha aumentado 1 puesto en AJAX (en relación al último mes)
Gráfica de AJAX

Cargar 2 archivos json en el mismo html

Publicado por Rafael (5 intervenciones) el 03/02/2020 23:07:42
Hola José Manuel efectivamente era eso!! en el archivo adjunto que me mandastes ya sale como deberia, solucionado!!!! Mucha pero muchas gracias por tu ayuda !!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar