Arrange JSON data by date within React--nothing breaks and nothing works

I have found a few answers on Stack Overflow for this, but they have not worked within my code. Currently I have a JSON file which contains a News array. Each object has a title, description, and date. The sorting does not work, but it also does not currently break the page, so I'm not sure what to debug or what would help it work. Any help is much appreciated!

This is the code in my News.js file:

import labNewsJson from '../json/labNews.json';

import '../styles/News.css';



const newsList = labNewsJson['news']



class News extends Component {

    render() {

        newsList.sort ( function (a, b){

            return new Date(a.date) - new Date(b.date);

        });



        const news = newsList.map((newsItem, index) => {

            return (

                <div className='newsContainer' key={index}>

                    <h3>{newsItem.title}</h3>

                    <p>{newsItem.description}</p>

                </div>

            )

        });



        return (

            <div className='container'>

                <div className='pageTitle'><h1>Lab News</h1></div>

                <div>{news}</div>

            </div>

        );

    }

}



export default News;

edited Nov 20 '18 at 4:11

coreyward

49.6k1595124

asked Nov 20 '18 at 4:05

Rgreaner

106

Are your dates coming out as expected? I.e. does new Date(a.date) give you a date?

– coreyward
Nov 20 '18 at 4:18

Did you parse the json ?Or you have something that does it automatically for you?

– Shyam Babu
Nov 20 '18 at 4:30

Coreyward--No, I'm getting NaN. @ShyamBabu I tried, but I'm not sure how to parse only the date. I get errors when I try to JSON.parse the whole thing. I may be doing it incorrectly as well

– Rgreaner
Nov 20 '18 at 19:06

What error did you get exactly?When trying parse?@Rgreaner

– Shyam Babu
Nov 21 '18 at 5:34

I'm sorry for the delayed response! I am able to get the dates by having different "month", "day", and "year" fields which I think will help those editing and don't know code within my project.

– Rgreaner
Nov 30 '18 at 14:20

add a comment |

This is the code in my News.js file:

import labNewsJson from '../json/labNews.json';

import '../styles/News.css';



const newsList = labNewsJson['news']



class News extends Component {

    render() {

        newsList.sort ( function (a, b){

            return new Date(a.date) - new Date(b.date);

        });



        const news = newsList.map((newsItem, index) => {

            return (

                <div className='newsContainer' key={index}>

                    <h3>{newsItem.title}</h3>

                    <p>{newsItem.description}</p>

                </div>

            )

        });



        return (

            <div className='container'>

                <div className='pageTitle'><h1>Lab News</h1></div>

                <div>{news}</div>

            </div>

        );

    }

}



export default News;

edited Nov 20 '18 at 4:11

coreyward

49.6k1595124

asked Nov 20 '18 at 4:05

Rgreaner

106

Are your dates coming out as expected? I.e. does new Date(a.date) give you a date?

– coreyward
Nov 20 '18 at 4:18

Did you parse the json ?Or you have something that does it automatically for you?

– Shyam Babu
Nov 20 '18 at 4:30

Coreyward--No, I'm getting NaN. @ShyamBabu I tried, but I'm not sure how to parse only the date. I get errors when I try to JSON.parse the whole thing. I may be doing it incorrectly as well

– Rgreaner
Nov 20 '18 at 19:06

What error did you get exactly?When trying parse?@Rgreaner

– Shyam Babu
Nov 21 '18 at 5:34

I'm sorry for the delayed response! I am able to get the dates by having different "month", "day", and "year" fields which I think will help those editing and don't know code within my project.

– Rgreaner
Nov 30 '18 at 14:20

add a comment |

This is the code in my News.js file:

import labNewsJson from '../json/labNews.json';

import '../styles/News.css';



const newsList = labNewsJson['news']



class News extends Component {

    render() {

        newsList.sort ( function (a, b){

            return new Date(a.date) - new Date(b.date);

        });



        const news = newsList.map((newsItem, index) => {

            return (

                <div className='newsContainer' key={index}>

                    <h3>{newsItem.title}</h3>

                    <p>{newsItem.description}</p>

                </div>

            )

        });



        return (

            <div className='container'>

                <div className='pageTitle'><h1>Lab News</h1></div>

                <div>{news}</div>

            </div>

        );

    }

}



export default News;

edited Nov 20 '18 at 4:11

coreyward

49.6k1595124

asked Nov 20 '18 at 4:05

Rgreaner

106

This is the code in my News.js file:

import labNewsJson from '../json/labNews.json';

import '../styles/News.css';



const newsList = labNewsJson['news']



class News extends Component {

    render() {

        newsList.sort ( function (a, b){

            return new Date(a.date) - new Date(b.date);

        });



        const news = newsList.map((newsItem, index) => {

            return (

                <div className='newsContainer' key={index}>

                    <h3>{newsItem.title}</h3>

                    <p>{newsItem.description}</p>

                </div>

            )

        });



        return (

            <div className='container'>

                <div className='pageTitle'><h1>Lab News</h1></div>

                <div>{news}</div>

            </div>

        );

    }

}



export default News;

json reactjs sorting

edited Nov 20 '18 at 4:11

coreyward

49.6k1595124

asked Nov 20 '18 at 4:05

Rgreaner

106

edited Nov 20 '18 at 4:11

coreyward

49.6k1595124

asked Nov 20 '18 at 4:05

Rgreaner

106

edited Nov 20 '18 at 4:11

coreyward

49.6k1595124

edited Nov 20 '18 at 4:11

coreyward

49.6k1595124

edited Nov 20 '18 at 4:11

coreyward

49.6k1595124

asked Nov 20 '18 at 4:05

Rgreaner

106

asked Nov 20 '18 at 4:05

Rgreaner

106

asked Nov 20 '18 at 4:05

Rgreaner

106

Are your dates coming out as expected? I.e. does new Date(a.date) give you a date?

– coreyward
Nov 20 '18 at 4:18

Did you parse the json ?Or you have something that does it automatically for you?

– Shyam Babu
Nov 20 '18 at 4:30

Coreyward--No, I'm getting NaN. @ShyamBabu I tried, but I'm not sure how to parse only the date. I get errors when I try to JSON.parse the whole thing. I may be doing it incorrectly as well

– Rgreaner
Nov 20 '18 at 19:06

What error did you get exactly?When trying parse?@Rgreaner

– Shyam Babu
Nov 21 '18 at 5:34

I'm sorry for the delayed response! I am able to get the dates by having different "month", "day", and "year" fields which I think will help those editing and don't know code within my project.

– Rgreaner
Nov 30 '18 at 14:20

add a comment |

Are your dates coming out as expected? I.e. does new Date(a.date) give you a date?

– coreyward
Nov 20 '18 at 4:18

Did you parse the json ?Or you have something that does it automatically for you?

– Shyam Babu
Nov 20 '18 at 4:30

Coreyward--No, I'm getting NaN. @ShyamBabu I tried, but I'm not sure how to parse only the date. I get errors when I try to JSON.parse the whole thing. I may be doing it incorrectly as well

– Rgreaner
Nov 20 '18 at 19:06

What error did you get exactly?When trying parse?@Rgreaner

– Shyam Babu
Nov 21 '18 at 5:34

I'm sorry for the delayed response! I am able to get the dates by having different "month", "day", and "year" fields which I think will help those editing and don't know code within my project.

– Rgreaner
Nov 30 '18 at 14:20

Are your dates coming out as expected? I.e. does new Date(a.date) give you a date?

– coreyward
Nov 20 '18 at 4:18

Did you parse the json ?Or you have something that does it automatically for you?

– Shyam Babu
Nov 20 '18 at 4:30

Coreyward--No, I'm getting NaN. @ShyamBabu I tried, but I'm not sure how to parse only the date. I get errors when I try to JSON.parse the whole thing. I may be doing it incorrectly as well

– Rgreaner
Nov 20 '18 at 19:06

What error did you get exactly?When trying parse?@Rgreaner

– Shyam Babu
Nov 21 '18 at 5:34

I'm sorry for the delayed response! I am able to get the dates by having different "month", "day", and "year" fields which I think will help those editing and don't know code within my project.

– Rgreaner
Nov 30 '18 at 14:20

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386066%2farrange-json-data-by-date-within-react-nothing-breaks-and-nothing-works%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu