Recorres arrays que contiene un campo JSON


#1


#2

Que es lo que has conseguido hacer por ahora? Ya tienes decidido que carousel vas a a implementar?


#3

Quiz√°s esto te sirva:

        computed:{
            itemsNoticias(){
                return this.noticias.map( noticia => {
                    return Object.assign( noticia, { fotos: JSON.parse( noticia.fotos )})
               })
            }
        }

#5

Ese computado es para volver volver a llenar las matrices noticias con el mismo pero ahora con el campo noticia.foto en formato JSON?
¬ŅQu√© debo hacer para calcularlo?
Si es así donde llamamos el computado?

Disculpa que este confundido es que soy relativamente nuevo


#6

Si miljan voy a utilizar el de Bootstrap pero él ese de comporta muy bien la cuestión es el formato del campo fotos del arrays noticias que por cada ves que recorro una fila d dicho arrays debo convertir en JSON el campo fotos de la fila en la que está parado


#7

Indicas lo que quieres hacer y teorizas sobre como crees que deberias de hacerlo, pero no ense√Īas ningun codigo de implementacion. Para darte soluciones concretas debes hacer preguntas concretas. Muestra el codigo que has implementado para iniciar el Carousel de cada fila y el error que te da. No hagas fotos del codigo, pegalo como texto y aun mejor crea un proyecto en jsfiddle o similar.

PD: No existe array de tipo Vue, solamente JS Array.


#8
var data = [{
  nombre: 'noticia1',
  fotos: [{id:0,foto:'https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg'},{id:1, foto:'https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/549585-istock-909106260.jpg?itok=ds7LqH1N&resize=1100x1100'}]
  },
  {
  nombre: 'noticia2',
  fotos: [{id:3,foto:'https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/549585-istock-909106260.jpg?itok=ds7LqH1N&resize=1100x1100'},{id:4,foto:'https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg'}]
  }
];

var app = new Vue({
  el:'#app',
  data: {
    noticias: data,
  }
});
.carousel{
  height: 200px;
  background-color: black;
  color: white;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body >
  <div id="app">

  <div v-for="(noticia,idex) in noticias" id="fotos">
    <div v-bind:id="'carouselExampleControls' + idex" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div v-for="(foto,idx) in noticia.fotos" class="carousel-item" :class="{ active: idx==0 }">
          <img class="d-block w-100" v-bind:src="foto.foto" v-bind:alt="noticia.nombre">
        </div>
      </div>
      <a class="carousel-control-prev" v-bind:href="'#carouselExampleControls' + idex"  role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" v-bind:href="'#carouselExampleControls' + idex"  role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  </body>
</html>

#9

Ese. Es un ejemplo de lo que estoy haciendo
Solo que el arrays noticias viene de la base de datos pero as de cuenta que llega de la misma manera de cómo está ahí entonces
Cada ves que se recorre
Yo creo otro for para recorrer lo que est√° en el campo fotos
Sin embargo el formato es string y no objeto debo convertir a JSON pero no sé cómo ni en qué parte del código


#10

Cuando recuperas data del backend en formato JSON este normalmente es automaticamente convertido a objeto, si no es el caso probablemtne el tipo de data no es especificado en el response y el browser lo interpreta como texto. Si no tienes control sobre el servidor, siempre puedes convertir un string json a objecto json usando JSON.parse() y viceversa usando JSON.stringify().

Mi recomendacion seria que lo hicieras en un computed function donde te asegures que todo el data que vas a usar esta bien formateado y listo, tal como explica @blashstar en su respuesta anterior.

Una vez tienes el computed en su lugar, simplemente usa itemsNoticias en vez de noticias directamente. Puedes obtener mas informacion sobre computed properties en la documentacion de Vue.


#11

Hola miljan buenos días , yo guarde los datos comprobandolos con la extensión de JSON de Google para ver si el formato estaba bien y efectivamente eran correctos

<HTML>
  <div v-for="(noticia,idex) in ítemsNoticias " id="fotos">
    <div v-bind:id="'carouselExampleControls' + idex" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div v-for="(foto,idx) in noticia.fotos" ></div>
</htm
``

Entonces en vez de poner noticia directamente debo poner la funci√≥n computed que me ense√Īaste en el primer comentario ?
Quedaría de la forma en que lo exprese ahí ?

#12

Sí, correcto. Puedes ver el resultado de itemsNoticias usando el chrome extension vue devtools o simplemente haciendo un console.log del mismo en el created hook.


#13

Vale amigo, lógicamente ya que me di cuenta que el campo me lo tomaba como string sabía qué hacer, sabía que tenía que convertir en formato JSON pero no sabía cómo realizarlo , ahorita más tarde implemento ojalá me funcione bien saludos


#14

Hola buenas tardes amigo miljan gracias por todo me funcionó a la perfección