Search code examples
javascriptvue.jsvue-resource

Vuejs with arrays

Im converting a JSON response to an array with the following: 

        json_data = response.body.movies;
        var result = [];
        for(var i in json_data) result.push([i, json_data [i]]);
        self.movies = _.chunk(result, 3);

Before I try to convert it, it's an object, looking like this:

enter image description here

After converting:

enter image description here

I have to convert because lodash chunk method only works on arrays (?).

So when running _.chunk(JSONAPIREPSONSE,4), self.movies looks like:

enter image description here

So far too good.

But when I'm trying to v-for self.movies, I cannot get the information i need. Im having this template

           <div class="row" v-for="(movie, index) in movies" v-bind:index="index">
                <div class="col-sm-4" v-for="(set, key) in movie" v-bind:key="key">
                    <div class="panel">
                        <div class="panel-heading">
                            <a v-on:click.prevent="fetchNow(movie.movie_title)" :href="movie.movie_id">@{{ set.movie_title }}</a>
                        </div>
                        <div class="panel-body">
                        movie title: <b>@{{ set.movie_title }}</b> <br>
                        set: <b>@{{ set }}</b> <br>
                              //Here comes Content do whatever here
                        </div>
                    </div>
            </div>

And the result for {{ set.movie_title }} is empty, with no errors.

The result for {{ set }} is:

[ "0", { "movie_title": "Bridget Jones's", "movie_id": "17523" } ] 
[ "1", { "movie_title": "Strange", "movie_id": "17483" } ]

The expected result

Normal vuejs syntax to display the content of the array.

Solution

  • try to access it like that {{ set[1].movie_title }}

    and you can use _.chunk without convert the json response to array and access the result like that {{ set.movie_title }}