Estoy tratando de establecer el valor de un valor clave en un literal JSON que está contenido con una etiqueta, por ejemplo, en el fragmento debajo de la información de datos es el literal JSON.
<video id="myPlayer_1" width="90%" poster="videos/posters/NoVideoPoster.png" data-info="{"start_time": "71522", "end_time":"71622", next_video:"0"}"> </video>Ahora puedo leer el atributo usando el siguiente código:
var ar = JSON.parse(videoElement.getAttribute("data-info")) console.log("next video" + ar.next-_video);pero configurarlo está resultando difícil, por ejemplo:
videoElement.setAttribute("data-info.next_video", "1");produce:
<video id="myPlayer_1" width="90%" poster="videos/posters/NoVideoPoster.png" data-info="{"start_time": "71522", "end_time":"71622",next_video: "0"}" data-info.next_video = "1"> </video>Lo cual obviamente no es correcto. ¿Alguien puede ayudar?
Tienes que configurar todo el atributo. Para el DOM, recuerda, es solo una cadena.
Entonces, por ejemplo, después de haberlo leído y analizado:
var ar = JSON.parse(videoElement.getAttribute("data-info"))puede actualizarlo y configurarlo nuevamente convirtiéndolo nuevamente a JSON (una cadena):
ar["next-video"] = 1; videoElement.setAttribute("data-info", JSON.stringify(ar)); Si tiene el control del elemento y necesita actualizar solo partes de esa información, puede considerar atributos data-* separados en lugar de uno solo con JSON. Por ejemplo:
<video id="myPlayer_1" width="90%" poster="videos/posters/NoVideoPoster.png" data-start-time=71522 data-end-time=71622 data-next-video=0 ></video>Luego, actualizar el "próximo video" es:
videoElement.dataset.nextVideo = "1"; Observe cómo el conjunto de dataset convierte data-next-video a nextVideo . Ver los detalles en MDN .
en vez de
videoElement.setAttribute("data-info.next_video", "1");deberías hacer esto
var ar = JSON.parse(videoElement.getAttribute("data-info")) ar.next_video = "1"; videoElement.setAttribute("data-info", JSON.stringify(ar));