I don't want to create another db table to filter who is team and who is friend, please help me
Question
I don't want to creater another table called friends at strapi and link it again to visual studio code, so I have a Characters table for all team and friends. So I want to input only new data at Characters , but filter it to know which one is friend or team. So I've tried to make a function for it to know's which is a friend, that I've determined with if you have only start date your a team if you have both start and end date you are friend. The source code at the file is this:
import Head from 'next/head'
import Layout from '../../components/Layout'
import styles from '../../styles/Home.module.css'
import fetchFromCMS from '../../lib/service';
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
export async function getStaticProps() {
const characters = await fetchFromCMS('characters');
return {
props: { characters},
revalidate: 1,
};
}
function sortByDate(a , b){
return new Date(a.StartDate) - new Date(b.StartDate);
}
function isFirend(a ){
var bool = true;
new Date(a.EndDate) != null? bool = true : bool= false;
return bool ;
}
const charactersItem = ({ characters }) => {
return (
<Layout>
<div className={styles.container}>
<Head>
<title>Characters</title>
</Head>
<main className={styles.main} id="page-top">
{/*///Team*/ }
<section className="bg-light page-section">
<div className="container">
<div className="row">
<div className="col-lg-12 text-center">
<h2 className="section-heading text-uppercase">Our Amazing Team</h2>
<h3 className="section-subheading text-muted">Check out our fantastic team.</h3>
</div>
</div>
<div className="row">
{characters.sort().map((character) => (
<div className="col-sm-4">
<a href={`/Team/${character.Slug}`}>
<div className="team-member">
<img className="mx-auto rounded-circle" src={character.Image.url} alt=""></img>
<h4 className="text-muted">{character.PaineapleName}</h4>
</div>
</a>
</div>
))
}
</div>
</div>
</section>
{/*//friends*/}
{ <section className="bg-light page-section">
<div className="container">
<div className="row">
<div className="col-lg-12 text-center">
<h2 className="section-heading text-uppercase">Our Amazing Friends</h2>
<h3 className="section-subheading text-muted">Check out our fantastic team.</h3>
</div>
</div>
<div className="row">
{characters.sort(character.EndDate).map((character) => (
<div className="col-sm-4">
<a href={`/Team/${character.Slug}`}>
<div className="team-member">
<img className="mx-auto rounded-circle" src={character.Image.url} alt=""></img>
<h4 className="text-muted">{character.PaineapleName}</h4>
</div>
</a>
</div>
))
}
</div>
</div>
</section> }
</main>
</div>
</Layout>
)
};
export default charactersItem;
The results aren't what I've expected because and the error it shows is this one:
I try other solutions and the only way I did something nearby the objective it duplicated, I mean with this, it duplicated the info instead of filter which one is friend.
1 answers
solution1
0 2021-07-20 23:52:48
character.endDate is not a compare function. It's possible Characters is the issue but you should isolate each issue one by one to troubleshoot.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.