Sorting function from a React app to display JSON data in a sortable table
up vote
1
down vote
favorite
I created this simple react application for a coding challenge, which is described in the linked README file. Basically, I created the components and helper logic to display dynamic JSON data in a sortable table.
I did not clear the coding challenge and I am looking for some feedback on how this could be done better. Note that the solution does work but the code quality may not be that good.
In my opinion, the issue could be how I implemented this getSortedData function:
import moment from "moment";
export const getSortedData = (tableData, sortBy, sortOrderAsc) => {
tableData.rows.sort((a, b) => {
const valueA = a[sortBy];
const valueB = b[sortBy];
switch (sortBy) {
case "title": {
return valueA.toLowerCase() > valueB.toLowerCase() ? 1 : -1;
}
case "releaseDate": {
const momentA = moment(valueA, "DD-MM-YYYY");
const momentB = moment(valueB, "DD-MM-YYYY");
if (!momentA.isValid()) {
return 1;
}
if (!momentB.isValid()) {
return -1;
}
return momentA.isAfter(momentB) ? 1 : -1;
}
case "productionBudget":
case "worldwideBoxOffice":
case "number": {
if (Number.isNaN(parseFloat(valueA))) return -1;
if (Number.isNaN(parseFloat(valueB))) return 1;
return valueA > valueB ? 1 : -1;
}
default: {
return valueA > valueB ? 1 : -1;
}
}
});
if (!sortOrderAsc) {
tableData.rows.reverse();
}
return tableData;
};
Where sortBy could be the id of one of the columns in following tableData. sortOrderAsc is a boolean which tells whether the data ia sorted in ascending order. tableData is as following:
{
"columns": [
{ "id": "number", "title": "Number" },
{ "id": "title", "title": "Movie" },
{ "id": "releaseDate", "title": "Release Date" },
{ "id": "productionBudget", "title": "Production Budget in $" },
{ "id": "worldwideBoxOffice", "title": "Worldwide Box Office in $" }
],
"rows": [
{
"number": 1,
"releaseDate": "02-05-2008",
"title": "Iron Man",
"productionBudget": 186000000,
"worldwideBoxOffice": 585171547
},
{
"number": 2,
"releaseDate": "13-06-2008",
"title": "The Incredible Hulk",
"productionBudget": 137500000,
"worldwideBoxOffice": 265573859
},
{
"number": 3,
"releaseDate": "07-05-2010",
"title": "Iron Man 2",
"productionBudget": 170000000,
"worldwideBoxOffice": 621156389
},
{
"number": 4,
"releaseDate": "06-05-2011",
"title": "Thor",
"productionBudget": 150000000,
"worldwideBoxOffice": 449326618
},
{
"number": 5,
"releaseDate": "22-07-2011",
"title": "Captain America: The First Avenger",
"productionBudget": 140000000,
"worldwideBoxOffice": 370569776
},
{
"number": 6,
"releaseDate": "04-05-2012",
"title": "The Avengers",
"productionBudget": 225000000,
"worldwideBoxOffice": 1519479547
},
{
"number": 7,
"releaseDate": "03-05-2013",
"title": "Iron Man 3",
"productionBudget": 200000000,
"worldwideBoxOffice": 1215392272
},
{
"number": 8,
"releaseDate": "08-11-2013",
"title": "Thor: The Dark World",
"productionBudget": 150000000,
"worldwideBoxOffice": 644602516
},
{
"number": 9,
"releaseDate": "04-04-2014",
"title": "Captain America: The Winter Soldier",
"productionBudget": 170000000,
"worldwideBoxOffice": 714401889
},
{
"number": 10,
"releaseDate": "01-08-2014",
"title": "Guardians of the Galaxy",
"productionBudget": 170000000,
"worldwideBoxOffice": 771051335
},
{
"number": 11,
"releaseDate": "01-05-2015",
"title": "Avengers: Age of Ultron",
"productionBudget": 330600000,
"worldwideBoxOffice": 1408218722
},
{
"number": 12,
"releaseDate": "17-07-2015",
"title": "Ant-Man",
"productionBudget": 130000000,
"worldwideBoxOffice": 518860086
},
{
"number": 13,
"releaseDate": "06-05-2016",
"title": "Captain America: Civil War",
"productionBudget": 250000000,
"worldwideBoxOffice": 1153304495
},
{
"number": 14,
"releaseDate": "04-11-2016",
"title": "Doctor Strange",
"productionBudget": 165000000,
"worldwideBoxOffice": 677323653
},
{
"number": 15,
"releaseDate": "05-05-2017",
"title": "Guardians of the Galaxy Vol 2",
"productionBudget": 200000000,
"worldwideBoxOffice": 862888462
},
{
"number": 16,
"releaseDate": "07-07-2017",
"title": "Spider-Man: Homecoming",
"productionBudget": 175000000,
"worldwideBoxOffice": 880070886
},
{
"number": 17,
"releaseDate": "03-11-2017",
"title": "Thor: Ragnarok",
"productionBudget": 180000000,
"worldwideBoxOffice": 850650283
},
{
"number": 18,
"releaseDate": "16-02-2018",
"title": "Black Panther",
"productionBudget": 200000000,
"worldwideBoxOffice": 1346960289
},
{
"number": 19,
"releaseDate": "27-04-2018",
"title": "Avengers: Infinity War",
"productionBudget": 300000000,
"worldwideBoxOffice": 2017483467
},
{
"number": 20,
"releaseDate": "06-06-2018",
"title": "Ant-Man and the Wasp",
"productionBudget": 130000000,
"worldwideBoxOffice": 361759753
},
{
"number": 21,
"releaseDate": "Unknown",
"title": "The Eternals",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 22,
"releaseDate": "Unknown",
"title": "Black Widow",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 23,
"releaseDate": "08-05-2019",
"title": "Captain Marvel",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 24,
"releaseDate": "03-05-2019",
"title": "UnreleaseDated Avengers Movie"
},
{
"number": 25,
"releaseDate": "05-07-2019",
"title": "Spider-Man: Far From Home"
},
{
"number": 26,
"releaseDate": "2020",
"title": "Guardians of the Galaxy Vol 3",
"productionBudget": 0,
"worldwideBoxOffice": 0
}
]
}
javascript sorting json react.js
edited Sep 25 at 16:22
200_success
127k15148411
asked Sep 25 at 13:44
Sambhav Gore
1063
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
up vote
1
down vote
favorite
I created this simple react application for a coding challenge, which is described in the linked README file. Basically, I created the components and helper logic to display dynamic JSON data in a sortable table.
I did not clear the coding challenge and I am looking for some feedback on how this could be done better. Note that the solution does work but the code quality may not be that good.
In my opinion, the issue could be how I implemented this getSortedData function:
import moment from "moment";
export const getSortedData = (tableData, sortBy, sortOrderAsc) => {
tableData.rows.sort((a, b) => {
const valueA = a[sortBy];
const valueB = b[sortBy];
switch (sortBy) {
case "title": {
return valueA.toLowerCase() > valueB.toLowerCase() ? 1 : -1;
}
case "releaseDate": {
const momentA = moment(valueA, "DD-MM-YYYY");
const momentB = moment(valueB, "DD-MM-YYYY");
if (!momentA.isValid()) {
return 1;
}
if (!momentB.isValid()) {
return -1;
}
return momentA.isAfter(momentB) ? 1 : -1;
}
case "productionBudget":
case "worldwideBoxOffice":
case "number": {
if (Number.isNaN(parseFloat(valueA))) return -1;
if (Number.isNaN(parseFloat(valueB))) return 1;
return valueA > valueB ? 1 : -1;
}
default: {
return valueA > valueB ? 1 : -1;
}
}
});
if (!sortOrderAsc) {
tableData.rows.reverse();
}
return tableData;
};
Where sortBy could be the id of one of the columns in following tableData. sortOrderAsc is a boolean which tells whether the data ia sorted in ascending order. tableData is as following:
{
"columns": [
{ "id": "number", "title": "Number" },
{ "id": "title", "title": "Movie" },
{ "id": "releaseDate", "title": "Release Date" },
{ "id": "productionBudget", "title": "Production Budget in $" },
{ "id": "worldwideBoxOffice", "title": "Worldwide Box Office in $" }
],
"rows": [
{
"number": 1,
"releaseDate": "02-05-2008",
"title": "Iron Man",
"productionBudget": 186000000,
"worldwideBoxOffice": 585171547
},
{
"number": 2,
"releaseDate": "13-06-2008",
"title": "The Incredible Hulk",
"productionBudget": 137500000,
"worldwideBoxOffice": 265573859
},
{
"number": 3,
"releaseDate": "07-05-2010",
"title": "Iron Man 2",
"productionBudget": 170000000,
"worldwideBoxOffice": 621156389
},
{
"number": 4,
"releaseDate": "06-05-2011",
"title": "Thor",
"productionBudget": 150000000,
"worldwideBoxOffice": 449326618
},
{
"number": 5,
"releaseDate": "22-07-2011",
"title": "Captain America: The First Avenger",
"productionBudget": 140000000,
"worldwideBoxOffice": 370569776
},
{
"number": 6,
"releaseDate": "04-05-2012",
"title": "The Avengers",
"productionBudget": 225000000,
"worldwideBoxOffice": 1519479547
},
{
"number": 7,
"releaseDate": "03-05-2013",
"title": "Iron Man 3",
"productionBudget": 200000000,
"worldwideBoxOffice": 1215392272
},
{
"number": 8,
"releaseDate": "08-11-2013",
"title": "Thor: The Dark World",
"productionBudget": 150000000,
"worldwideBoxOffice": 644602516
},
{
"number": 9,
"releaseDate": "04-04-2014",
"title": "Captain America: The Winter Soldier",
"productionBudget": 170000000,
"worldwideBoxOffice": 714401889
},
{
"number": 10,
"releaseDate": "01-08-2014",
"title": "Guardians of the Galaxy",
"productionBudget": 170000000,
"worldwideBoxOffice": 771051335
},
{
"number": 11,
"releaseDate": "01-05-2015",
"title": "Avengers: Age of Ultron",
"productionBudget": 330600000,
"worldwideBoxOffice": 1408218722
},
{
"number": 12,
"releaseDate": "17-07-2015",
"title": "Ant-Man",
"productionBudget": 130000000,
"worldwideBoxOffice": 518860086
},
{
"number": 13,
"releaseDate": "06-05-2016",
"title": "Captain America: Civil War",
"productionBudget": 250000000,
"worldwideBoxOffice": 1153304495
},
{
"number": 14,
"releaseDate": "04-11-2016",
"title": "Doctor Strange",
"productionBudget": 165000000,
"worldwideBoxOffice": 677323653
},
{
"number": 15,
"releaseDate": "05-05-2017",
"title": "Guardians of the Galaxy Vol 2",
"productionBudget": 200000000,
"worldwideBoxOffice": 862888462
},
{
"number": 16,
"releaseDate": "07-07-2017",
"title": "Spider-Man: Homecoming",
"productionBudget": 175000000,
"worldwideBoxOffice": 880070886
},
{
"number": 17,
"releaseDate": "03-11-2017",
"title": "Thor: Ragnarok",
"productionBudget": 180000000,
"worldwideBoxOffice": 850650283
},
{
"number": 18,
"releaseDate": "16-02-2018",
"title": "Black Panther",
"productionBudget": 200000000,
"worldwideBoxOffice": 1346960289
},
{
"number": 19,
"releaseDate": "27-04-2018",
"title": "Avengers: Infinity War",
"productionBudget": 300000000,
"worldwideBoxOffice": 2017483467
},
{
"number": 20,
"releaseDate": "06-06-2018",
"title": "Ant-Man and the Wasp",
"productionBudget": 130000000,
"worldwideBoxOffice": 361759753
},
{
"number": 21,
"releaseDate": "Unknown",
"title": "The Eternals",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 22,
"releaseDate": "Unknown",
"title": "Black Widow",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 23,
"releaseDate": "08-05-2019",
"title": "Captain Marvel",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 24,
"releaseDate": "03-05-2019",
"title": "UnreleaseDated Avengers Movie"
},
{
"number": 25,
"releaseDate": "05-07-2019",
"title": "Spider-Man: Far From Home"
},
{
"number": 26,
"releaseDate": "2020",
"title": "Guardians of the Galaxy Vol 3",
"productionBudget": 0,
"worldwideBoxOffice": 0
}
]
}
javascript sorting json react.js
edited Sep 25 at 16:22
200_success
127k15148411
asked Sep 25 at 13:44
Sambhav Gore
1063
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
I don't think it is possible for me to paste the code here, as I want to review the whole solution, how I broke the components, if I should be making more smaller components and how I have used the helper function. If this cannot be reviewed and answered here then I am on the wrong site. Can someone guide me to a place where the entire application solution can be reviewed and I can get some useful feedback to develop my skills.
– Sambhav Gore
Sep 25 at 15:02
@200_success I have added the actual code which I need reviewing the most. Can you please remove 'put on hold' and also remove the downvote ? thanks.
– Sambhav Gore
Sep 25 at 16:13
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I created this simple react application for a coding challenge, which is described in the linked README file. Basically, I created the components and helper logic to display dynamic JSON data in a sortable table.
I did not clear the coding challenge and I am looking for some feedback on how this could be done better. Note that the solution does work but the code quality may not be that good.
In my opinion, the issue could be how I implemented this getSortedData function:
import moment from "moment";
export const getSortedData = (tableData, sortBy, sortOrderAsc) => {
tableData.rows.sort((a, b) => {
const valueA = a[sortBy];
const valueB = b[sortBy];
switch (sortBy) {
case "title": {
return valueA.toLowerCase() > valueB.toLowerCase() ? 1 : -1;
}
case "releaseDate": {
const momentA = moment(valueA, "DD-MM-YYYY");
const momentB = moment(valueB, "DD-MM-YYYY");
if (!momentA.isValid()) {
return 1;
}
if (!momentB.isValid()) {
return -1;
}
return momentA.isAfter(momentB) ? 1 : -1;
}
case "productionBudget":
case "worldwideBoxOffice":
case "number": {
if (Number.isNaN(parseFloat(valueA))) return -1;
if (Number.isNaN(parseFloat(valueB))) return 1;
return valueA > valueB ? 1 : -1;
}
default: {
return valueA > valueB ? 1 : -1;
}
}
});
if (!sortOrderAsc) {
tableData.rows.reverse();
}
return tableData;
};
Where sortBy could be the id of one of the columns in following tableData. sortOrderAsc is a boolean which tells whether the data ia sorted in ascending order. tableData is as following:
{
"columns": [
{ "id": "number", "title": "Number" },
{ "id": "title", "title": "Movie" },
{ "id": "releaseDate", "title": "Release Date" },
{ "id": "productionBudget", "title": "Production Budget in $" },
{ "id": "worldwideBoxOffice", "title": "Worldwide Box Office in $" }
],
"rows": [
{
"number": 1,
"releaseDate": "02-05-2008",
"title": "Iron Man",
"productionBudget": 186000000,
"worldwideBoxOffice": 585171547
},
{
"number": 2,
"releaseDate": "13-06-2008",
"title": "The Incredible Hulk",
"productionBudget": 137500000,
"worldwideBoxOffice": 265573859
},
{
"number": 3,
"releaseDate": "07-05-2010",
"title": "Iron Man 2",
"productionBudget": 170000000,
"worldwideBoxOffice": 621156389
},
{
"number": 4,
"releaseDate": "06-05-2011",
"title": "Thor",
"productionBudget": 150000000,
"worldwideBoxOffice": 449326618
},
{
"number": 5,
"releaseDate": "22-07-2011",
"title": "Captain America: The First Avenger",
"productionBudget": 140000000,
"worldwideBoxOffice": 370569776
},
{
"number": 6,
"releaseDate": "04-05-2012",
"title": "The Avengers",
"productionBudget": 225000000,
"worldwideBoxOffice": 1519479547
},
{
"number": 7,
"releaseDate": "03-05-2013",
"title": "Iron Man 3",
"productionBudget": 200000000,
"worldwideBoxOffice": 1215392272
},
{
"number": 8,
"releaseDate": "08-11-2013",
"title": "Thor: The Dark World",
"productionBudget": 150000000,
"worldwideBoxOffice": 644602516
},
{
"number": 9,
"releaseDate": "04-04-2014",
"title": "Captain America: The Winter Soldier",
"productionBudget": 170000000,
"worldwideBoxOffice": 714401889
},
{
"number": 10,
"releaseDate": "01-08-2014",
"title": "Guardians of the Galaxy",
"productionBudget": 170000000,
"worldwideBoxOffice": 771051335
},
{
"number": 11,
"releaseDate": "01-05-2015",
"title": "Avengers: Age of Ultron",
"productionBudget": 330600000,
"worldwideBoxOffice": 1408218722
},
{
"number": 12,
"releaseDate": "17-07-2015",
"title": "Ant-Man",
"productionBudget": 130000000,
"worldwideBoxOffice": 518860086
},
{
"number": 13,
"releaseDate": "06-05-2016",
"title": "Captain America: Civil War",
"productionBudget": 250000000,
"worldwideBoxOffice": 1153304495
},
{
"number": 14,
"releaseDate": "04-11-2016",
"title": "Doctor Strange",
"productionBudget": 165000000,
"worldwideBoxOffice": 677323653
},
{
"number": 15,
"releaseDate": "05-05-2017",
"title": "Guardians of the Galaxy Vol 2",
"productionBudget": 200000000,
"worldwideBoxOffice": 862888462
},
{
"number": 16,
"releaseDate": "07-07-2017",
"title": "Spider-Man: Homecoming",
"productionBudget": 175000000,
"worldwideBoxOffice": 880070886
},
{
"number": 17,
"releaseDate": "03-11-2017",
"title": "Thor: Ragnarok",
"productionBudget": 180000000,
"worldwideBoxOffice": 850650283
},
{
"number": 18,
"releaseDate": "16-02-2018",
"title": "Black Panther",
"productionBudget": 200000000,
"worldwideBoxOffice": 1346960289
},
{
"number": 19,
"releaseDate": "27-04-2018",
"title": "Avengers: Infinity War",
"productionBudget": 300000000,
"worldwideBoxOffice": 2017483467
},
{
"number": 20,
"releaseDate": "06-06-2018",
"title": "Ant-Man and the Wasp",
"productionBudget": 130000000,
"worldwideBoxOffice": 361759753
},
{
"number": 21,
"releaseDate": "Unknown",
"title": "The Eternals",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 22,
"releaseDate": "Unknown",
"title": "Black Widow",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 23,
"releaseDate": "08-05-2019",
"title": "Captain Marvel",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 24,
"releaseDate": "03-05-2019",
"title": "UnreleaseDated Avengers Movie"
},
{
"number": 25,
"releaseDate": "05-07-2019",
"title": "Spider-Man: Far From Home"
},
{
"number": 26,
"releaseDate": "2020",
"title": "Guardians of the Galaxy Vol 3",
"productionBudget": 0,
"worldwideBoxOffice": 0
}
]
}
javascript sorting json react.js
edited Sep 25 at 16:22
200_success
127k15148411
asked Sep 25 at 13:44
Sambhav Gore
1063
I created this simple react application for a coding challenge, which is described in the linked README file. Basically, I created the components and helper logic to display dynamic JSON data in a sortable table.
I did not clear the coding challenge and I am looking for some feedback on how this could be done better. Note that the solution does work but the code quality may not be that good.
In my opinion, the issue could be how I implemented this getSortedData function:
import moment from "moment";
export const getSortedData = (tableData, sortBy, sortOrderAsc) => {
tableData.rows.sort((a, b) => {
const valueA = a[sortBy];
const valueB = b[sortBy];
switch (sortBy) {
case "title": {
return valueA.toLowerCase() > valueB.toLowerCase() ? 1 : -1;
}
case "releaseDate": {
const momentA = moment(valueA, "DD-MM-YYYY");
const momentB = moment(valueB, "DD-MM-YYYY");
if (!momentA.isValid()) {
return 1;
}
if (!momentB.isValid()) {
return -1;
}
return momentA.isAfter(momentB) ? 1 : -1;
}
case "productionBudget":
case "worldwideBoxOffice":
case "number": {
if (Number.isNaN(parseFloat(valueA))) return -1;
if (Number.isNaN(parseFloat(valueB))) return 1;
return valueA > valueB ? 1 : -1;
}
default: {
return valueA > valueB ? 1 : -1;
}
}
});
if (!sortOrderAsc) {
tableData.rows.reverse();
}
return tableData;
};
Where sortBy could be the id of one of the columns in following tableData. sortOrderAsc is a boolean which tells whether the data ia sorted in ascending order. tableData is as following:
{
"columns": [
{ "id": "number", "title": "Number" },
{ "id": "title", "title": "Movie" },
{ "id": "releaseDate", "title": "Release Date" },
{ "id": "productionBudget", "title": "Production Budget in $" },
{ "id": "worldwideBoxOffice", "title": "Worldwide Box Office in $" }
],
"rows": [
{
"number": 1,
"releaseDate": "02-05-2008",
"title": "Iron Man",
"productionBudget": 186000000,
"worldwideBoxOffice": 585171547
},
{
"number": 2,
"releaseDate": "13-06-2008",
"title": "The Incredible Hulk",
"productionBudget": 137500000,
"worldwideBoxOffice": 265573859
},
{
"number": 3,
"releaseDate": "07-05-2010",
"title": "Iron Man 2",
"productionBudget": 170000000,
"worldwideBoxOffice": 621156389
},
{
"number": 4,
"releaseDate": "06-05-2011",
"title": "Thor",
"productionBudget": 150000000,
"worldwideBoxOffice": 449326618
},
{
"number": 5,
"releaseDate": "22-07-2011",
"title": "Captain America: The First Avenger",
"productionBudget": 140000000,
"worldwideBoxOffice": 370569776
},
{
"number": 6,
"releaseDate": "04-05-2012",
"title": "The Avengers",
"productionBudget": 225000000,
"worldwideBoxOffice": 1519479547
},
{
"number": 7,
"releaseDate": "03-05-2013",
"title": "Iron Man 3",
"productionBudget": 200000000,
"worldwideBoxOffice": 1215392272
},
{
"number": 8,
"releaseDate": "08-11-2013",
"title": "Thor: The Dark World",
"productionBudget": 150000000,
"worldwideBoxOffice": 644602516
},
{
"number": 9,
"releaseDate": "04-04-2014",
"title": "Captain America: The Winter Soldier",
"productionBudget": 170000000,
"worldwideBoxOffice": 714401889
},
{
"number": 10,
"releaseDate": "01-08-2014",
"title": "Guardians of the Galaxy",
"productionBudget": 170000000,
"worldwideBoxOffice": 771051335
},
{
"number": 11,
"releaseDate": "01-05-2015",
"title": "Avengers: Age of Ultron",
"productionBudget": 330600000,
"worldwideBoxOffice": 1408218722
},
{
"number": 12,
"releaseDate": "17-07-2015",
"title": "Ant-Man",
"productionBudget": 130000000,
"worldwideBoxOffice": 518860086
},
{
"number": 13,
"releaseDate": "06-05-2016",
"title": "Captain America: Civil War",
"productionBudget": 250000000,
"worldwideBoxOffice": 1153304495
},
{
"number": 14,
"releaseDate": "04-11-2016",
"title": "Doctor Strange",
"productionBudget": 165000000,
"worldwideBoxOffice": 677323653
},
{
"number": 15,
"releaseDate": "05-05-2017",
"title": "Guardians of the Galaxy Vol 2",
"productionBudget": 200000000,
"worldwideBoxOffice": 862888462
},
{
"number": 16,
"releaseDate": "07-07-2017",
"title": "Spider-Man: Homecoming",
"productionBudget": 175000000,
"worldwideBoxOffice": 880070886
},
{
"number": 17,
"releaseDate": "03-11-2017",
"title": "Thor: Ragnarok",
"productionBudget": 180000000,
"worldwideBoxOffice": 850650283
},
{
"number": 18,
"releaseDate": "16-02-2018",
"title": "Black Panther",
"productionBudget": 200000000,
"worldwideBoxOffice": 1346960289
},
{
"number": 19,
"releaseDate": "27-04-2018",
"title": "Avengers: Infinity War",
"productionBudget": 300000000,
"worldwideBoxOffice": 2017483467
},
{
"number": 20,
"releaseDate": "06-06-2018",
"title": "Ant-Man and the Wasp",
"productionBudget": 130000000,
"worldwideBoxOffice": 361759753
},
{
"number": 21,
"releaseDate": "Unknown",
"title": "The Eternals",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 22,
"releaseDate": "Unknown",
"title": "Black Widow",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 23,
"releaseDate": "08-05-2019",
"title": "Captain Marvel",
"productionBudget": 0,
"worldwideBoxOffice": 0
},
{
"number": 24,
"releaseDate": "03-05-2019",
"title": "UnreleaseDated Avengers Movie"
},
{
"number": 25,
"releaseDate": "05-07-2019",
"title": "Spider-Man: Far From Home"
},
{
"number": 26,
"releaseDate": "2020",
"title": "Guardians of the Galaxy Vol 3",
"productionBudget": 0,
"worldwideBoxOffice": 0
}
]
}
javascript sorting json react.js
javascript sorting json react.js
edited Sep 25 at 16:22
200_success
127k15148411
asked Sep 25 at 13:44
Sambhav Gore
1063
edited Sep 25 at 16:22
200_success
127k15148411
asked Sep 25 at 13:44
Sambhav Gore
1063
edited Sep 25 at 16:22
200_success
127k15148411
edited Sep 25 at 16:22
200_success
127k15148411
edited Sep 25 at 16:22
200_success
127k15148411
127k15148411
asked Sep 25 at 13:44
Sambhav Gore
1063
asked Sep 25 at 13:44
Sambhav Gore
1063
asked Sep 25 at 13:44
Sambhav Gore
1063
1063
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ 2 days ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
I don't think it is possible for me to paste the code here, as I want to review the whole solution, how I broke the components, if I should be making more smaller components and how I have used the helper function. If this cannot be reviewed and answered here then I am on the wrong site. Can someone guide me to a place where the entire application solution can be reviewed and I can get some useful feedback to develop my skills.
– Sambhav Gore
Sep 25 at 15:02
@200_success I have added the actual code which I need reviewing the most. Can you please remove 'put on hold' and also remove the downvote ? thanks.
– Sambhav Gore
Sep 25 at 16:13
add a comment |
I don't think it is possible for me to paste the code here, as I want to review the whole solution, how I broke the components, if I should be making more smaller components and how I have used the helper function. If this cannot be reviewed and answered here then I am on the wrong site. Can someone guide me to a place where the entire application solution can be reviewed and I can get some useful feedback to develop my skills.
– Sambhav Gore
Sep 25 at 15:02
@200_success I have added the actual code which I need reviewing the most. Can you please remove 'put on hold' and also remove the downvote ? thanks.
– Sambhav Gore
Sep 25 at 16:13
I don't think it is possible for me to paste the code here, as I want to review the whole solution, how I broke the components, if I should be making more smaller components and how I have used the helper function. If this cannot be reviewed and answered here then I am on the wrong site. Can someone guide me to a place where the entire application solution can be reviewed and I can get some useful feedback to develop my skills.
– Sambhav Gore
Sep 25 at 15:02
I don't think it is possible for me to paste the code here, as I want to review the whole solution, how I broke the components, if I should be making more smaller components and how I have used the helper function. If this cannot be reviewed and answered here then I am on the wrong site. Can someone guide me to a place where the entire application solution can be reviewed and I can get some useful feedback to develop my skills.
– Sambhav Gore
Sep 25 at 15:02
@200_success I have added the actual code which I need reviewing the most. Can you please remove 'put on hold' and also remove the downvote ? thanks.
– Sambhav Gore
Sep 25 at 16:13
@200_success I have added the actual code which I need reviewing the most. Can you please remove 'put on hold' and also remove the downvote ? thanks.
– Sambhav Gore
Sep 25 at 16:13
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
I don't know why you didn't clear the coding challenge. It looks mostly alright.
There's a couple of things I think could be improved:
- getSortedData mutates the tableData. Only setState should be able to mutate state.
- getSortedData has hard-coded the column names. Table was supposed to have dynamic columns. You could have solved this by sending in either custom sorter predicates or adding on a dataType property to each column definition.
answered Sep 26 at 12:46
Magnus Jeffs Tovslid
41125
1
Thank you for looking into it. I completely overlooked the mutating of the tableData. Thanks for pointing that out. For second part about types, I did write the following quote in my readme file as a feedback for reviewer (may be I should have done as you suggested instead by using predicates):... adding a "type" (string|number|date ...) to the columns in data.json would make the solution more scalable as there would be no hardcoding for expected values for ids in the json data.Thanks.
– Sambhav Gore
Sep 26 at 12:56
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I don't know why you didn't clear the coding challenge. It looks mostly alright.
There's a couple of things I think could be improved:
- getSortedData mutates the tableData. Only setState should be able to mutate state.
- getSortedData has hard-coded the column names. Table was supposed to have dynamic columns. You could have solved this by sending in either custom sorter predicates or adding on a dataType property to each column definition.
answered Sep 26 at 12:46
Magnus Jeffs Tovslid
41125
1
Thank you for looking into it. I completely overlooked the mutating of the tableData. Thanks for pointing that out. For second part about types, I did write the following quote in my readme file as a feedback for reviewer (may be I should have done as you suggested instead by using predicates):... adding a "type" (string|number|date ...) to the columns in data.json would make the solution more scalable as there would be no hardcoding for expected values for ids in the json data.Thanks.
– Sambhav Gore
Sep 26 at 12:56
add a comment |
up vote
0
down vote
I don't know why you didn't clear the coding challenge. It looks mostly alright.
There's a couple of things I think could be improved:
- getSortedData mutates the tableData. Only setState should be able to mutate state.
- getSortedData has hard-coded the column names. Table was supposed to have dynamic columns. You could have solved this by sending in either custom sorter predicates or adding on a dataType property to each column definition.
answered Sep 26 at 12:46
Magnus Jeffs Tovslid
41125
1
Thank you for looking into it. I completely overlooked the mutating of the tableData. Thanks for pointing that out. For second part about types, I did write the following quote in my readme file as a feedback for reviewer (may be I should have done as you suggested instead by using predicates):... adding a "type" (string|number|date ...) to the columns in data.json would make the solution more scalable as there would be no hardcoding for expected values for ids in the json data.Thanks.
– Sambhav Gore
Sep 26 at 12:56
add a comment |
up vote
0
down vote
up vote
0
down vote
I don't know why you didn't clear the coding challenge. It looks mostly alright.
There's a couple of things I think could be improved:
- getSortedData mutates the tableData. Only setState should be able to mutate state.
- getSortedData has hard-coded the column names. Table was supposed to have dynamic columns. You could have solved this by sending in either custom sorter predicates or adding on a dataType property to each column definition.
answered Sep 26 at 12:46
Magnus Jeffs Tovslid
41125
I don't know why you didn't clear the coding challenge. It looks mostly alright.
There's a couple of things I think could be improved:
- getSortedData mutates the tableData. Only setState should be able to mutate state.
- getSortedData has hard-coded the column names. Table was supposed to have dynamic columns. You could have solved this by sending in either custom sorter predicates or adding on a dataType property to each column definition.
answered Sep 26 at 12:46
Magnus Jeffs Tovslid
41125
answered Sep 26 at 12:46
Magnus Jeffs Tovslid
41125
answered Sep 26 at 12:46
Magnus Jeffs Tovslid
41125
answered Sep 26 at 12:46
Magnus Jeffs Tovslid
41125
41125
1
Thank you for looking into it. I completely overlooked the mutating of the tableData. Thanks for pointing that out. For second part about types, I did write the following quote in my readme file as a feedback for reviewer (may be I should have done as you suggested instead by using predicates):... adding a "type" (string|number|date ...) to the columns in data.json would make the solution more scalable as there would be no hardcoding for expected values for ids in the json data.Thanks.
– Sambhav Gore
Sep 26 at 12:56
add a comment |
1
Thank you for looking into it. I completely overlooked the mutating of the tableData. Thanks for pointing that out. For second part about types, I did write the following quote in my readme file as a feedback for reviewer (may be I should have done as you suggested instead by using predicates):... adding a "type" (string|number|date ...) to the columns in data.json would make the solution more scalable as there would be no hardcoding for expected values for ids in the json data.Thanks.
– Sambhav Gore
Sep 26 at 12:56
1
1
Thank you for looking into it. I completely overlooked the mutating of the tableData. Thanks for pointing that out. For second part about types, I did write the following quote in my readme file as a feedback for reviewer (may be I should have done as you suggested instead by using predicates):
... adding a "type" (string|number|date ...) to the columns in data.json would make the solution more scalable as there would be no hardcoding for expected values for ids in the json data. Thanks.– Sambhav Gore
Sep 26 at 12:56
Thank you for looking into it. I completely overlooked the mutating of the tableData. Thanks for pointing that out. For second part about types, I did write the following quote in my readme file as a feedback for reviewer (may be I should have done as you suggested instead by using predicates):
... adding a "type" (string|number|date ...) to the columns in data.json would make the solution more scalable as there would be no hardcoding for expected values for ids in the json data. Thanks.– Sambhav Gore
Sep 26 at 12:56
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f204348%2fsorting-function-from-a-react-app-to-display-json-data-in-a-sortable-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I don't think it is possible for me to paste the code here, as I want to review the whole solution, how I broke the components, if I should be making more smaller components and how I have used the helper function. If this cannot be reviewed and answered here then I am on the wrong site. Can someone guide me to a place where the entire application solution can be reviewed and I can get some useful feedback to develop my skills.
– Sambhav Gore
Sep 25 at 15:02
@200_success I have added the actual code which I need reviewing the most. Can you please remove 'put on hold' and also remove the downvote ? thanks.
– Sambhav Gore
Sep 25 at 16:13