Javascript / ES6: вставка поэлементного элемента в объект JSON - PullRequest
Новая
       6

Javascript / ES6: вставка поэлементного элемента в объект JSON

1 голос
/ 17 февраля 2020

Я получаю JSON -объект от API, подобного thhis: 

       {
    "BuchungsvorgangKategorieId": 1,
    "BuchungsvorgangKategorie": "Miete",
    "Group": "Ideeller Bereich"
    },
      {
    "BuchungsvorgangKategorieId": 2,
    "BuchungsvorgangKategorie": "Taiko-Beitrag",
    "Group": "Ideeller Bereich"
    },
   {
    "BuchungsvorgangKategorieId": 5,
    "BuchungsvorgangKategorie": "Jahresbeitrag",
    "Group": "Ideeller Bereich"
},
      {
    "BuchungsvorgangKategorieId": 3,
    "BuchungsvorgangKategorie": "Reisekosten (Auftritt)",
    "Group": "Zweckbetrieb"
    },
      {
    "BuchungsvorgangKategorieId": 4,
    "BuchungsvorgangKategorie": "Auftritt",
    "Group": "Zweckbetrieb"
    },

Теперь при использовании выбора Vuetify есть возможность сгруппировать по некоторому заголовку. Таким образом, я хотел бы преобразовать свой результат следующим образом: 

    {header: "Ideller Bereich" },  
    {
    "BuchungsvorgangKategorieId": 1,
    "BuchungsvorgangKategorie": "Miete",
    "Group": "Ideeller Bereich"
    },
      {
    "BuchungsvorgangKategorieId": 2,
    "BuchungsvorgangKategorie": "Monatsbeitrag",
    "Group": "Ideeller Bereich"
    },
  {
    "BuchungsvorgangKategorieId": 5,
    "BuchungsvorgangKategorie": "Jahresbeitrag",
    "Group": "Ideeller Bereich"
  },
  {header: Zweckbetrieb },
      {
    "BuchungsvorgangKategorieId": 3,
    "BuchungsvorgangKategorie": "Reisekosten",
    "Group": "Zweckbetrieb"
    },
      {
    "BuchungsvorgangKategorieId": 4,
    "BuchungsvorgangKategorie": "Auftritt",
    "Group": "Zweckbetrieb"
    }

Полагаю, мне нужно циклически (arr.map?) Просматривать массив объектов и иметь переменную проверки, которая изначально пуста. Всегда, если текущее значение Group отличается от check-переменной, мне нужно обновить контрольную переменную и вставить новое значение в позицию перед текущим элементом (arr.splice?)

Update:

Благодаря комментариям @trincot и @Natixco, которые помогли мне в дальнейшем расследовании, я смог создать этот маленький кусочек кода: 

 let checkVariable = ""
this.FilterKategorien.forEach((item,index) => { //this.FilterKategorien contained the records from the API.
            if(item.Group!=checkVariable) {
              this.FilterKategorien.splice(index,0,{header: item.Group})
              checkVariable=item.Group
            }
          })
          console.log(this.FilterKategorien)

1 Ответ

1 голос
/ 17 февраля 2020

Я бы просто создал новый массив; вы всегда можете присвоить его исходной переменной: 

let grouped = data.reduce((acc, item, i) =>
    !i || acc[acc.length-1].Group !== item.Group 
        ? acc.concat({header: item.Group}, item)
        : acc.concat(item)
, []);

Если вам действительно нужно изменить исходный массив, вы также можете использовать вышеприведенное и склеить его в исходный: 

data.splice(0, data.length, ...data.reduce((acc, item, i) =>
    !i || acc[acc.length-1].Group !== item.Group 
        ? acc.concat({header: item.Group}, item)
        : acc.concat(item)
, []));
...