我如何使用Vue Axios循环进入api-pltform json数据

时间:2019-05-07 21:32:53

标签: json api vue.js vuejs2 axios

{  
   "@context":"\/contexts\/Movie",
   "@id":"\/movies",
   "@type":"hydra:Collection",
   "hydra:member":[  
      [  
         {  
            "id":"001db4b9-7042-11e9-b3a6-0ac98b070556",
            "title":"Kalank",
            "originalTitle":"कलंक",
            "originalLanguage":"",
            "description":"Kalank is an Indian Hindi-language period drama film directed by Abhishek Varman and produced by Karan Johar, Sajid Nadiadwala and Fox Star Studios.\n\nCinema: Cineco City Center\nMovie Timings:  5.00 + 8.15 + 11.30 PM.\n",
            "releasedAt":"2019-04-17T00:00:00+00:00",
            "imdbId":"tt6988116",
            "posterUrl":null,
            "genre":"Drama",
            "cinemaName":"Cir"
         },
         {  
            "id":"00bfc9b3-7042-11e9-b3a6-0ac98b070556",
            "title":"Stockholm",
            "originalTitle":"Stockholm",
            "originalLanguage":"",
            "description":"Based on the absurd but true 1973 bank heist and hostage crisis in Stockholm that was documented in the New Yorker as the origins of the ‘Stockholm Syndrome’.\n\nCinema: Cineco Seef II\nMovie Timings:  7.00 + 9.00 + 11.00 PM.\n",
            "releasedAt":"2019-04-12T00:00:00+00:00",
            "imdbId":"tt6474040",
            "posterUrl":"\/ko3AS33BLNEBcp1CO4FvdRltTxr.jpg",
            "genre":"Drama",
            "cinemaName":"SeI"
         },
         {  
            "id":"0181072c-7042-11e9-b3a6-0ac98b070556",
            "title":"Shazam!",
            "originalTitle":"Shazam!",
            "originalLanguage":"",
            "description":"We all have a superhero inside us, it just takes a bit of magic to bring it out. In Billy Batson’s case, by shouting out one word – SHAZAM! – this streetwise fourteen-year-old foster kid can turn into the adult superhero Shazam.\n\nCinema: Cineco City ",
            "releasedAt":"2019-03-23T00:00:00+00:00",
            "imdbId":"tt0448115",
            "posterUrl":"\/xnopI5Xtky18MPhK40cZAGAOVeV.jpg",
            "genre":"Action",
            "cinemaName":"Center"
         },
         {  
            "id":"06b71b0a-6de5-11e9-962d-0adc8ab87612",
            "title":"Escape Room",
            "originalTitle":"Escape Room",
            "originalLanguage":"",
            "description":"Six strangers find themselves in a maze of deadly mystery rooms, and must use their wits to survive.\n\nCinema: Cineco City Center\nMovie Timings:  10.30 AM. + 12.30 + 2.30 + 4.30 + 6.30 + 8.30 + 10.30 PM.\n",
            "releasedAt":"2019-01-03T00:00:00+00:00",
            "imdbId":"tt5886046",
            "posterUrl":"\/15AlGTlaZa3W2zmIL4ehnCh8Xe0.jpg",
            "genre":"Action",
            "cinemaName":"Center"
         }
}],

 {  
         "page":1,
         "pageSize":25,
         "pageCount":8,
         "totalHits":176
      }
   ],
   "hydra:totalItems":2
}

我有一个JSON格式的api平台数据源,如上所示。但是,我想在

  • ..

    中的vue js应用程序中打印每条记录

    我尝试了以下操作,但不起作用:

    <ul>
       <li v-for="movie in movies">
    
      {{ movie['hydra:member'][0][0].title}} 
    
       </li>
    <li v-for="movie in movies">
    
      {{ movie['hydra:member'][0][0].genre}} 
    
       </li>
    </ul>
      </div>
    

    任何帮助如何使用Vue axion循环访问api平台JSON数据吗?我需要正确的for循环才能打印movie ['hydra:member'] [0] [0] .objects

    中可用的数据
  • 1 个答案:

    答案 0 :(得分:0)

    您可以尝试

    <ul>
       <li v-for="movie in movies['hydra:member']">
          {{ movie[0].title}}
          {{ movie[0].genre}}
       </li>
    </ul>