ReactJS ES6 массив фильтрации

Question

Я пытаюсь сгруппировать данные из объекта в многомерный массив

За последние три дня я пробовал несколько способов получить желаемый результат. Так как мне не повезло, вероятно, из-за моего плохого знания ReactJS / ES6. Я надеюсь, что кто-то может объяснить, как я могу заставить это работать.

Я думаю, мне придется использовать функцию карты. В функции map - функция фильтра для получения уникальных компаний, а затем цикл для добавления информации о таблице.

Конечный результат должен быть таким: https://wireframe.cc/No5uB7

Данные, которые я хотел бы отфильтровать:

{
  "viewings": [
    {
      "companyXXX": "company-XXX",
      "time_start": "02/04/2019",
      "time_end": "03/04/2019 11:59"
    },
    {
      "companyXXX": "company-XXX",
      "time_start": "14/04/2019",
      "time_end": "15/04/2019 11:59"
    },
    {
      "companyYYY": "company-YYY",
      "rejection": 40,
      "time_start": "14/04/2019",
      "time_end": "15/04/2019 11:59"
    }
  ]
}

Код, который у меня еще есть, не работает

    genData(data) {
      const di = data.viewings;

      let mps = [];

      di.map(m => mps.push(m.company));
      mps = Array.from(new Set(mps));

        console.log( mps );


       let mps = [];

       di.map((m) => 
         console.log( di.filter(mps => m.company) )
         );
    }

Answer 1

Я мог бы помочь, если ваши входные данные были немного более последовательными, особенно если вы пытаетесь написать m.company, что ничего не будет значить, если в каждом просмотре нет объекта company.

{
  "viewings": [
    {
      "company": "company-XXX",
      "time_start": "02/04/2019",
      "time_end": "03/04/2019 11:59"
    },
    {
      "company": "company-XXX",
      "time_start": "14/04/2019",
      "time_end": "15/04/2019 11:59"
    },
    {
      "company": "company-YYY",
      "time_start": "14/04/2019",
      "time_end": "15/04/2019 11:59"
    }
  ]
}

Затем вы можете написать:

var viewings = data.viewings.

var firstViewing = viewings[0];

var firstCompany = firstViewing.company;
var firstTimeStart = firstViewing.time_start;
// etc...

Ваши входные данные должны быть более структурированными, чтобы начать с.

Затем вы можете выйти из каждой компании:

var viewings = data.viewings;

viewings.forEach(v => {
    console.log(v.company);
});

Вы упоминаете JSX в своем вопросе, но код JSX отсутствует.Похоже, это проблема с вашим знанием JS, а не JSX.

Answer 2

Добро пожаловать в StackOverflow.

функция map возвращает список. в вашем случае вы можете легко использовать метод forEach вместо map .

что-то вроде этого:

datas.forEach(data=>myArray.push(data.company))

для получения дополнительной информации о карте и forEach, смотрите эти ссылки:

JavaScript: разница между .forEach () и .map ()

https://codeburst.io/javascript-map-vs-foreach-f38111822c0f