I have a Javascript error and I can’t fix it

Asked

Viewed 39 times

0

Code:

$(document).ready(function (){
    var products = "";
    var url = "https://cdn.rawgit.com/LucasRuy/1d4a5d45e2ea204d712d0b324af28bab/raw/342e0e9277be486102543c7f50ef5fcf193234b6/potions.json";  

    $.ajax({
        url: url,
        dataType: "json",
        success: function (response) {
            if(response.erro) {
                $("h2").html(response.erro);
            }else {
                for(var i = 0; i < response.data.length; i++) {
                    products += "<ul class='ranking'>";                   
                    products += "<li class='list'><img class='image' src=" + response.data[i].image + "></li>";
                    products += "<li class='list'><p class='name'>" + response.data[i].name + "</p></li>";                    
                    products += "<li class='list'><p class='price'>" + response.data[i].price + "</p></li>";
                    products += "</ul>";               
                }

                $('.box-products').html(products);
            }
        }
    });
});

Error:

script.js:12 Uncaught Typeerror: Cannot read Property 'lenght' of Undefined

jquery
  • 2

    Given that the only use of length is in response.data.length, by the error message, the attribute data does not exist in response. There should be?

  • Apparently, your [Answer.data] does not exist. It would be interesting to put a validation before the for

1 answer

2

The return of Ajax is not an array, it is a list of objects listed within the object potions, and not data:

{
  "potions": {
    "1": {
      "id": 1,
      "name": "Aging Potion",
      "image": "aging-potion.png",
      "price": 29.99,
      "effect": "Causes the drinker to advance in age",
      "ingredients": [
        "Red Wine",
        "Prune Juice",
        "Hairy Fungus",
        "Tortoise Shell",
        "Caterpillar",
        "Bat Tongue"
      ]
    },
    "2": {
      "id": 2,
      "name": "Bulgeye Potion",
      "image": "bulgeye-potion.png",
      "price": 19.99,
      "effect": "It affects one's eyes, causing them to swell",
      "ingredients": [
        "Beetle eyes",
        "Eel eyes"
      ]
    },
...

With that you can’t catch the .length direct. You can iterate in this list of objects in two ways:

Using for conventional:

How the list of objects starts from 1, the value of i in the for must begin from 1, and the parole use <= (smaller or equal) to the number of objects you can pick up using Object.keys(response.potions).length:

for(var i = 1; i <= Object.keys(response.potions).length; i++) {
  products += "<ul class='ranking'>";                   
  products += "<li class='list'><img class='image' src=" + response.potions[i].image + "></li>";
  products += "<li class='list'><p class='name'>" + response.potions[i].name + "</p></li>";                    
  products += "<li class='list'><p class='price'>" + response.potions[i].price + "</p></li>";
  products += "</ul>";               
}

Using for...in (best):

Using for...in you can iterate objects. This method is better because it does not get stuck to the sequential name of objects used in for conventional:

for(var i in response.potions) {
  products += "<ul class='ranking'>";                   
  products += "<li class='list'><img class='image' src=" + response.potions[i].image + "></li>";
  products += "<li class='list'><p class='name'>" + response.potions[i].name + "</p></li>";                    
  products += "<li class='list'><p class='price'>" + response.potions[i].price + "</p></li>";
  products += "</ul>";               
}

The i returns the name of each object in the list, regardless of whether it is a sequence or not.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.