0

soy nuevo en este tema queria saber como hago para obtener los valores de una url json para ponerlo en un enlace html de esta manera

<a href="{{url}}"> ir al enlace</a>

La url json es esta

https://cdws.us-east-1.amazonaws.com/drive/v2/photosGroups/shares/70i9aUm7TkGl9Ve4ShsJ_A.TZB9lroalwKfD1no707NBM

Dentro de esta url estan los datos, entre estas , más me interesa el valor de "url" e intentado enlazar con :

blog.posts = {};
$http.get('https://cdws.us-east-1.amazonaws.com/drive/v2/photosGroups/shares/70i9aUm7TkGl9Ve4ShsJ_A.TZB9lroalwKfD1no707NBM').success(function(data){
  blog.posts = data;
});

estoy usando javascript y html Pero no lo lee, podrían ayudarme porfavor quiero obtener el valor "url" que esta dentro del enlace json...

3
  • Te doy la bienvenida al sitio. Fíjate que al recibir el JSON se guarda el objeto ya sin serializar en la variable data. Pero data contiene muchas propiedades además de la URL. Si solo quieres acceder a la URL tendras que ir accediendo a cada propiedad hasta que llegues a la que buscas. Por ejemplo sería algo así: data.coverPhoto.url. Es más fácil si te llevas el JSON a un formateador de código donde puedas ver la estructura tales como: jsonformatter.curiousconcept.com
    – ordago
    Commented el 4 jun. 2020 a las 9:54
  • Por otra parte, parece que estés utilizando algún framework tipo angular o similar, si es así, te recomendaría que editases la pregunta y añadieses los tags correspondientes, así personas que conozcan estas tecnologías encontrarán más fácilmente tu pregunta y te podrán ayudar mejor.
    – ordago
    Commented el 4 jun. 2020 a las 9:56
  • Gracias por responder estimado amigo, podrias ayudarme con un script para poder obtener el valor de "url" porfavor... eh intentado, le puse data.coverPhoto.url no eh podido ... :(
    – amorfina
    Commented el 4 jun. 2020 a las 10:08

1 respuesta 1

0

Se te ha olvidado mencionar que estas usando un framework, creo que Angular, aunque perfectamente puede ser Laravel...

Tienes tres problemas, el primero reside en algo llamado CORS, en ingles significa Cross Origin Resource Sharing (intercambio de recursos de origen cruzado), las cuales sabotean la respuesta que intentas obtener desde esa URL (la API).

En especifico la cabecera mas importante es:

Access-Control-Allow-Origin

La cual es la que se encarga de dejar o no que alguien pueda acceder al recurso (si tiene el acceso o si se le concede el acceso), de lo contrario, las CORS están presentes de manera por defecto para proteger el acceso remoto a recursos de manera no autorizada.

con esto se hace evidente decir que si no tienes acceso a la API o si no estas autorizado para usar el recurso simplemente, hagas lo que hagas no vas a poder acceder a ese recurso ni mediante AJAX, ni mediante una peticion POST, ni mediante una peticion GET ni tampoco mediante http o fetch, ya que las CORS evitaran que pueda llegarte tal información al sitio.

La única forma de desactivar las CORS es que tu tengas acceso a los archivos del sitio y que al inicio del archivo que se encargue de traerte los recursos establezcas la cabecera:

"Access-Control-Allow-Origin: ipPublica"

O que establezcas la API como de acceso publico (mucho mas inseguro):

"Access-Control-Allow-Origin: *"

Sin embargo como te habrás dado cuenta, si la API no es tuya o no tienes acceso al archivo de la API no podrás modificar las cabeceras, y además el problema no es del lado del cliente, si no del lado del servidor (API), por lo cual simplemente:

No podras usar esa API en tu sitio.

Hay una manera de poder usar la API, pero eso depende de si la API acepta algo llamado API KEY, donde la API KEY la provee el mismo sitio de la API que deseas usar, normalmente si es una API comercial deberás pagar por una API KEY, la cual podrás añadir a la URL de manera especifica para poder acceder al recurso mediante una peticion GET.

Pero a no ser de que la API acepte una API KEY o algo parecido para darte acceso a ese recurso no hay ninguna otra forma en la que puedes acceder al recurso de la API KEY.

Mi recomendación en ese caso:

Buscar APIS publicas o pagar por una API KEY.

una vez sabiendo que probablemente no tengas acceso de ningún modo a los datos de esa API en tu sitio, pasamos al segundo problema, que es en el caso hipotetico en el que la API si te esta devolviendo correctamente y sin problemas la data.

En ese caso, fui directamente al link a ver la API y me di cuenta que no tiene una cabecera Content-Type seteada como JSON respuesta por lo cual el contenido que vas a obtener siempre de manera directa a la hora de hacer GET es un string y NO un JSON, por lo cual asumiendo que esto sirva, deberas luego parsear la data traida a un JSON, a fin de usarla:

//Te falta declararla, considera siempre declarar las variables antes de usarlas
const blog = {};
blog.posts = {};

$http.get('https://cdws.us-east-1.amazonaws.com/drive/v2/photosGroups/shares/70i9aUm7TkGl9Ve4ShsJ_A.TZB9lroalwKfD1no707NBM').success(function(data){
  //Usamos JSON.parse para pasar de un string a un JSON
  blog.posts = JSON.parse(data);
});

Si bien esto podria llegar a funcionar, el tercer problema es:

Olvidar que las operaciones con servidores son consideradas asincronas y pueden tardar un tiempo en ser resueltas.

Esto repercute en el hecho de que si intentas usar luego tu variable blog.posts despues de haber realizado tu peticion, el resultado sera undefined fuera de la peticion, pero dentro de la peticion (dentro del success), tendra el valor deseado.

Esto pasa por que estamos acostumbrados a que todo lo que hemos visto hasta el momento sea sincrono, pero en este caso, las peticiones http, son asincronas, el programa o su flujo NO se vera afectado por el hecho de que haya una peticion asincrona, el flujo por defecto de javascript es sincrono por lo que las llamadas sincronas son ejecutadas en orden.

Al ser javascript un lenguaje de programacion de naturaleza sincrono y ademas el hecho de que este es monohilo hace que las peticiones asincronas sean ejecutadas tambien en el mismo orden, pero no necesariamente que terminen en el mismo orden que fueron ejecutadas.

por lo que lo que ocurre es que javascript al toparse con algo que sea asincrono NO va a esperar a que las peticiones o funciones asincronas devuelvan una respuesta o un error, lo que va a hacer javascript es ejecutar ese metodo o funcion asincrona y seguira ejecutando el resto del codigo sin esperar ninguna de las peticiones asincronas, mientras tanto estas estaran a la espera de la obtencion de una respuesta o un error.

por lo que, digamos que el instante en el que intentes recuperar directamente el valor obtenido en la petición NO estará nunca sincronizado con el tiempo en el que intentas obtener dicho valor.

Por este motivo te recomiendo leer sobre 3 conceptos para poder que no te confundas al hacer peticiones de este tipo:

  • Funciones asincronas
  • async
  • await
  • Promise

Leyendo esos conceptos o investigandolos sabras como resolver ese problema o usarlo a tu favor.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.