Estoy tratando de mostrar el video que está en formato mp4 de la carpeta del código. Cuando trato de buscar el video haciendo clic en el botón, muestra un espacio vacío pero no muestra el video. visualización de la salida
El error que recibo de la consola: GET http://127.0.0.1:8080/myapi/myapi1/undefined 404 (Not Found)
A continuación se muestra la URL para mostrar los datos json: http://localhost:8080/myapi/myapi1/user/1
El enlace de arriba muestra:
{"videoName":"video.mp4"}El código para obtener el video y mostrarlo usando ajax:
$('#room1').on('click',function (e){ $.ajax({ method: "GET", cache: false, dataType: "json", url: "http://localhost:8080/myapi/myapi1/user/1", success: function(data) { var student = ''; // ITERATING THROUGH OBJECTS $.each(data, function (key, value) { // DATA FROM JSON OBJECT student += '<video height="603"'; student += 'src="' + value.videoName + '" autoplay loop muted></video>'; }); $('#video').append(student); }, error:function(exception){alert('Exeption:'+exception);} }) e.preventDefault(); });Entonces, los datos que está obteniendo están en FORMATO CODIFICADO JSON. por lo que debe analizarlo en un objeto JS. así: data = JSON.parse(data) en su función de success .
(1) Dado que solo tiene un elemento de datos devuelto, cambie el bloque de éxito de:
success: function(data) { var student = ''; // ITERATING THROUGH OBJECTS $.each(data, function (key, value) { // DATA FROM JSON OBJECT student += '<video height="603"'; student += 'src="' + value.videoName + '" autoplay loop muted></video>'; }); $('#video').append(student); },para
success: function(data) { var student = ''; // DATA FROM JSON OBJECT student += '<video height="603"'; student += 'src="' + data.videoName + '" autoplay loop muted></video>'; $('#video').append(student); },data.videoName ya es la información (nombre de archivo de video) que necesita
(2) Sin embargo, si tiene varios datos, como los siguientes:
[{"videoName":"video.mp4"}, {"videoName":"video1.mp4"}]entonces puedes usar lo siguiente:
success: function(data) { var student = ''; for (var x = 0; x < data.length; x++) { // DATA FROM JSON OBJECT student += '<video height="603"'; student += 'src="' + data[x].videoName + '" autoplay loop muted></video>'; } $('#video').append(student); },data[index].videoName serán los datos (nombre del archivo de video) para cada índice
(3) Si aún prefiere usar pares clave/valor, la sintaxis correcta será como:
$.each(data, function (key, value) { alert(data[key].videoName); })