Passing invalid value to data variable

Question

Sorry for my bad english, Hi, I'm beginer in Vue and I have iussue, which can't to solve. I load data about art from API (just a list of dicts), and then I making multi array (list of lists), when I save raw response.data, and my multi array in data variable of vue instanse I'm getting the similar data, but i don't change sourse list:

In raw variable fields offsetX and offsetY must must not exist. And field height is broken too. That fields also passing in raw variable, and I don't know why. Code of my app:

$(document).ready(function () {

    var app = new Vue({
        el: '#app',
        data: {
            raw: null,
            info: null,
            art_width: 252,
            window_width: null,
            window_height: null,
        },
        mounted() {
            this.window_width = window.innerWidth
            this.window_height = window.innerHeight 
            axios({
                method: 'get',
                url: '/content/art',
                contentType: 'application/json'
            })
            .then(function (response) {
                app.raw = response.data.items.slice();
                // If i delete create_array from app, raw variable is normal
                app.info = create_array(app.raw)
            });
            window.addEventListener('resize', () => {
                if (app.raw !== null){
                    app.info = create_array(app.raw)
                    this.window_width = window.innerWidth
                    this.window_height = window.innerHeight 
                }
            });
        },
        computed: {
            arts_in_line () {
                return parseInt((this.window_width - 24*2) / (this.art_width+10));
            },
            center_div_width ()  {
                return this.arts_in_line * (this.art_width + 10)
            }
        }
    })

});


function create_array(info) {
    // Gets number of arts in line
    arts_in_line = parseInt((window.innerWidth - 24*2) / (252+10));
    // For return 
    var multi_array = [];
    // Create mulri array
    for (var index = 0; index < info.length; index = index + arts_in_line) {
        multi_array.push(info.slice(index, index+arts_in_line));
    }
    // Save vertical offsets
    var top_offset = []
    for (var row = 0; row < multi_array.length; row ++) {
        for (var col = 0; col < multi_array[row].length; col ++) {
            // scale of art
            let scale = 252 / multi_array[row][col]['width'];
            // Calculation new height and offsetX/Y values
            if (row == 0) {
                top_offset[col] = parseInt(multi_array[row][col]['height'] * scale) + 10;
                multi_array[row][col]['offsetY'] = 0;
                multi_array[row][col]['offsetX'] = (252+10) * col + 'px';
                multi_array[row][col]['height'] = multi_array[row][col]['height'] * scale + 'px';
                multi_array[row][col]['width'] = 252 + 'px';
            } 
            else {
                multi_array[row][col]['offsetY'] = top_offset[col] + 'px';
                top_offset[col] = top_offset[col] + parseInt(multi_array[row][col]['height'] * scale) + 10;
                multi_array[row][col]['offsetX'] = (252+10) * col + 'px';
                multi_array[row][col]['height'] = multi_array[row][col]['height'] * scale + 'px';
                multi_array[row][col]['width'] = 252 + 'px';
            }
        }
    }
    return multi_array;
}

Answer 1

Instead of doing

// Create mulri array
    for (var index = 0; index < info.length; index = index + arts_in_line) {
        multi_array.push(info.slice(index, index+arts_in_line));
    }

you can simply just create a new array multi_array and loop through info adding what you want to multi_array. For example

    var multi_array = [];
    // Save vertical offsets
    var top_offset = []
    for (var row = 0; row < info.length; row ++) {
        for (var col = 0; col < info[row].length; col ++) {
             let scale = 252 / parseInt(info[row][col]['width']);

             const temp = {
                id: info[row][col]['id'],
                // Additional values you want
                height: (parseInt(multi_array[row][col]['height']) * scale) + 'px'
             }

             multi_array[row][col] = temp
        }
    }

    return multi_array;

This way you can add and exclude any key you want in your new array.