vue js находит объект в массиве, а затем распространяет его в новый массив с дополнительными свойствами - PullRequest
Новая
       25

vue js находит объект в массиве, а затем распространяет его в новый массив с дополнительными свойствами

0 голосов
/ 25 марта 2019

У меня есть три массива: цветные объекты, объекты размера, объекты sku. Они извлекаются из базы данных с помощью вызова API и сохраняются в данных Vue (). Затем я строю 2D-матрицу размеров и цветов с помощью sku, если она существует, используя карту, и нахожу операторы 

this.sizes.map(
    size=> this.colours.map(
        colour=>(
            this.skus.find(
                sku=> sku.sku == this.style.name + colour.colour_code + size.code
            ) || {sku: this.style.name + colour.colour_code + size.code, selected:false}
        )
    )
 )

Мне нужно присвоить результаты новому массиву (this.matrix), однако для пользовательского интерфейса мне также нужно дополнительное поле (selected: false), которого нет в объекте sku, которому не нужно жить в базе данных как это только для государственного контроля. Чтобы сделать это, я думаю, что мне нужно использовать Object.assign ({selected: false}, sku), но я не могу понять, куда бы я поместил его в приведенный выше код. Я должен сделать это, как назначено this.matrix, иначе Vue не будет генерировать геттеры и сеттеры

Каждая ссылка на ячейку в 2D-массиве будет иметь 0 или 1 skus в массиве sku. У каждого sku в массиве sku будет соответствующий слот в 2D-массиве.

Куда бы я положил Object.assign, или есть лучший способ?

Ответы [ 3 ]

1 голос
/ 26 марта 2019

Это было моё решение: 

this.sizes.map(
    size=> this.colours.map(
        colour=>(
            Object.assign(
                {
                   sku: this.style.name + colour.colour_code + size.code,
                   selected: false
                },
                this.skus.find(
                    sku=> sku.sku == this.style.name + colour.colour_code + size.code
                )
             ) 
         )
     )
 )

Теперь создается новый объект с выбранным sku и, если он находит подходящий объект sku, то распространяет свойства (через Object.assign) в новыйобъект.свойство sku существует в обоих исходных объектах, но будет выводиться только один раз.

1 голос
/ 25 марта 2019

Я немного упросту это, поскольку ваш вопрос не имеет никакого отношения к VueJS. 

let sizes = [1,2,3];
let cols = ['a','b','c']
let sku = ['1.a', '2.c'];

sizes.map( 
   s => cols.map( 
      c => s+"."+c ).map( 
           x => ({sku: x, 
                 selected: sku.find(s => s === x) ? true : false})))
//result is 
//[ 
//  [ {sku: "1.a", selected: true}, {sku: "1.b", selected: false} ...],
//  [ ... ],
//  [ ....] 
//]

т.е. соедините другую карту, чтобы получить sku представление, а затем сопоставьте полученный объект. Затем вы можете присвоить результат вашей 2D матрице объектов.

Если ваша матрица довольно большая и вы не хотите заново создавать новый объект для каждой ячейки в матрице, вы можете использовать тот факт, что map предоставляет индекс в качестве второго необязательного параметра функции стрелки: sized.map( (s,i) => cols.map( (c,j) => { ... } , Код будет менее читабельным, но вы можете напрямую манипулировать вашей матрицей.

0 голосов
/ 27 марта 2019

Начиная получать OT сейчас, каждый объект в 2D-массиве ДОЛЖЕН иметь свойство 'sku', поэтому он должен существовать в целевом массиве, на тот случай, если исходный массив имеет значение NULL.Код может быть более читабельным, если я вставлю переменную, а затем дважды вызову переменную, но она выполняет ту же логику. 

this.sizes.map(
    size=> this.colours.map(
        colour=>(
            skuCode=this.style.name + colour.colour_code + size.code;
            Object.assign(
                {
                   sku: skuCode,
                   selected: false
                },
                this.skus.find(
                    sku=> sku.sku == skuCode
                )
             ) 
         )
     )
 )
...