ReactJS ES6 array filtering

Question

I'm trying to group data from an object to a multidimensional array

In the last three days I've tried multiple ways to get the result I want. Since I've no luck, probably because of my poor knowledge of ReactJS/ES6. I hope someone can explain how I can get this to work.

I think I'll have to use the map function. Within the map function, a filter function to get the unique companies and then a loop to add the table information.

The end result should be like this: https://wireframe.cc/No5uB7

The data I'd like to filter:

{
  "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"
    }
  ]
}

The code I still have that isn't working

    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) )
         );
    }

Hi, Could you please add the expected output. so that we can understand it better and help. — simbathesailor, Apr 21 '19 at 12:06

score 0 · Answer 1 · answered Apr 21 '19 at 12:12

I might help if your input data was a bit more consistent, especially since you're trying to write m.company, which won't mean anything unless there is a company object in each viewing.

{
  "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"
    }
  ]
}

Then you can write:

var viewings = data.viewings.

var firstViewing = viewings[0];

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

Your input data should be more structured to begin with.

Then you can log out each company name:

var viewings = data.viewings;

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

You mention JSX in your question, but there's no JSX code. This appears to be an issue with your knowledge of JS rather than JSX.

ReactJS ES6 array filtering

1 Answers1