Uncaught (in promise) TypeError: product is not iterable, anybody please help me to resolve this error

Code Help HTML/CSS/JS
1
Document 
<Script>

    var product=[];
    function bodyload(){

        fetch("https://fakestoreapi.com/products")
        .then(function(response){
        return response.json;
       })
       .then(function(data)
    {
        product=data; 

        for(var item of product)
        {
           var div=document.createElement("div");
           div.className= "card mt-3";
           div.style.width="300px";

           div.innerHTML=`
          <img src= ${item.image} height="200" class="card-img-top">
          <div class="card-header" style=height:"200px">
            <h4>${item.title}</h4></div>
            <div class="card-footer">
                <h4>${item.price}</h4></div>
                `;
                document.getElementById(container).appendChild(div);
        }
    });
}

</Script>

Product Catalog

<div class="d-flex flex-wrap flex-row" class="container">

</div>
2

Hi @rashmidhande1 welcome to the community!

Could you please post a link to the Repl so that others can see the error message and suggest some ideas which might help?

3

I tried your code and when I printed product, you see that it is a function called json (it reads as something like function json() { [native code] }). All I had to do to make the code work was add parenthesis after response.json.

Your code should look something like this:

<script>
	const product = [];
	
	function bodyload() {
		fetch("https://fakestoreapi.com/products").then(function(response) {
			return response.json();
		}).then(function(data) {
			product = data;
			const container = document.getElementById("container");
			for (const item of product) {
				const div = document.createElement("div");
				div.className = "card mt-3";
				div.style.width = "300px";
				div.innerHTML = `
          <img src= ${item.image} height="200" class="card-img-top">
          <div class="card-header" style=height:"200px">
            <h4>${item.title}</h4></div>
            <div class="card-footer">
                <h4>${item.price}</h4></div>
                `;
				container.append(div);
			}
		});
	}
	
	window.onload = bodyload;
</script>
4

Hi @MattDESTROYER
Thank You so much for the precious time and help.

Json() is working I mean Error- Uncaught (in promise) TypeError: product is not iterable
this error is solved.

needed more correction…Thank you so much after your code I did some modification. and that worked for me.

Thanks again!

1 Like
5 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../FakestoreApi/node_modules/bootstrap/dist/css/bootstrap.css">

    <Script>

        var product=[];
        function bodyload(){

            var url='https://fakestoreapi.com/products';
            
            
            fetch(url)
            .then(function(response){
            return response.json();
           })
           .then(function(data)
        {
            product=data; 
            for(var item of product)
            {
               var div=document.createElement("div");
               div.className= "card mt-3";
               div.style.width="300px";

               div.innerHTML=`
              <img src= ${item.image} height="200" class="card-img-top">
              <div class="card-header" style=height:"200px">
                <h4>${item.title}</h4></div>
                <div class="card-footer">
                    <h4>${item.price}</h4></div>
                    `;
                    document.getElementById("container").appendChild(div);
            }

        });
    }

    </Script>
</head>
<body class="container-fluid" onload="bodyload()">
    <h3>Products Catalog</h3>
    <div class="row"><div class="col-3"></div>
<div class="col-9">
    <div class="d-flex flex-wrap flex-row" id="container">

</div></div>
    

    </div>
    
</body>
</html>
        this is the final code
1 Like
6

Hi @IanAtCSTeach,
Thank you for your help!
Error has been solved.

7

Yeah, the error was because you assigned product = response.json, not product = response.json(). No problem, glad I could help. :slight_smile:

1 Like
8

@MattDESTROYER
Yeah, since yesterday I was trying to solve it. It was really great help from you.

Thanks again! :blush: :pray:

1 Like
9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.