We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I am trying to filter the products downloaded from woocommerce REST API in my NEXTJS project.
I added a snippet to Function.php to bypass the limit of 100 products to download:
function maximum_api_filter($query_params) { $query_params['per_page']["maximum"]=100000; return $query_params; } add_filter('rest_product_collection_params', 'maximum_api_filter');
Function that retrieves products from the REST API :
export const getProductsData = async (perPage) => { return await api.get( `products`, { per_page: perPage || 6 }, ); };
I display products with the help of this component:
const Card = ({ item }) => { // destructuring props return ( <div className="container-fluid"> <div className="row justify-content-center"> {item.map((Val) => { return ( <div className="col-md-4 col-sm-6 card my-3 py-3 border-0" key={Val.id} > <div className="card-title fw-bold text-center fs-4"> {Val.name} -- </div> <div className="card-img-top text-center"> <img src={Val.images[0].src } alt={Val.title} className="photo w-75" /> </div> <div className="card-body"> <div className="card-text text-center fw-bold fs-4"> {Val.price} </div> <p> {Val.categories[0].name} </p> </div> </div> ); })} </div> </div> ); };
I organized the product category buttons and filtering with :
export default function Home({ headerFooter, products, mainCats}) { const [item, setItem] = useState(products); const menuItems = [...new Set(mainCats.map((Val) => Val.name))] //filter products const filterItem = (curcat) => { const newItem = products.filter((newVal) => { return newVal.categories[0].name === curcat; }); setItem(newItem); };
As long as it tries to "pull" up to 50 products from the API everything works fine...:
const { data: products } = await getProductsData(50);
However, when I try to pull 100 or more I encounter this error :
Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'name') Source /pages/index.js (33:32) @ eval 31 | const filterItem = (curcat) => { 32 | const newItem = products.filter((newVal) => { > 33 | return newVal.categories[0].name === curcat; | ^ 34 | }); 35 | setItem(newItem); 36 | }; Call Stack filterItem pagesindex.js (32:27) onClick srcComponentsButtons.jsx (12:29) Show collapsed frames
Similarly in every place where I try to target
product.categories[0].name or product.images[0].src
Here is github repository with my project: https://github.com/GitCulture/WP-Reactjs-productsFiltering
What could be the problem ? Please help, I am a beginner.
The text was updated successfully, but these errors were encountered:
No branches or pull requests
I am trying to filter the products downloaded from woocommerce REST API in my NEXTJS project.
I added a snippet to Function.php to bypass the limit of 100 products to download:
Function that retrieves products from the REST API :
I display products with the help of this component:
I organized the product category buttons and filtering with :
As long as it tries to "pull" up to 50 products from the API everything works fine...:
const { data: products } = await getProductsData(50);
However, when I try to pull 100 or more I encounter this error :
Similarly in every place where I try to target
product.categories[0].name or product.images[0].src
Here is github repository with my project: https://github.com/GitCulture/WP-Reactjs-productsFiltering
What could be the problem ? Please help, I am a beginner.
The text was updated successfully, but these errors were encountered: