Error creating components from an array

Question

Error creating components from an array

Navigation

#1 by (2 votes)

1

Based on this question I tried to do the same but I do not get anything.

function displayResults(container, results) {

  var table = $("<div class='row tabla'  id='tabla1'>");
  $.each(results.filas, function(i, filas) {
    var tr = $("<div>");
    $.each(filas.columnas, function(i, columnas) {
      $("<div class='col' posicion='0'><p>").text(columnas.fichas.NumeroLetraSimbolo).appendTo(tr);
    });
    tr.appendTo(table);
  });
  table.appendTo(container);

}

var results = {
  "filas": [{
    "columnas": [{
      "fichas": [{
        "clase": "col vacio",
        "NumeroLetraSimbolo": [""]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["5"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["9"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["3"]
      }]
    }]
  }, {
    "columnas": [{
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["8"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["12"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["2"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["10"]
      }]
    }]
  }, {
    "columnas": [{
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["11"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["6"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["15"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["14"]
      }]
    }]
  }, {
    "columnas": [{
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["1"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["13"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["7"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["4"]
      }]
    }]
  }],
  "posiciones_tablero": [],
  "imagenDeFondo": []
}

displayResults($("#results"), results);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>

What am I missing?

javascript jquery json

asked by Ruslan López 04.01.2016 в 06:41

source

1 answer

Execute lumen migration using docker com.sun.faces.mgbean.ManagedBeanCreationException:

score 2 · Accepted Answer

The error is in this line:

$("<div class='col' posicion='0'><p>").text(columnas.fichas.NumeroLetraSimbolo).appendTo(tr);

fichas is an array and depending on the shape of your objects you should choose the first element.

That is, you must say fichas[0]

$("<div class='col' posicion='0'><p>").text(columnas.fichas[0].NumeroLetraSimbolo).appendTo(tr);

This is the complete code

function displayResults(container, results) {

  var table = $("<div class='row tabla'  id='tabla1'>");
  $.each(results.filas, function(i, filas) {
    var tr = $("<div>");
    $.each(filas.columnas, function(i, columnas) {
      $("<div class='col' posicion='0'><p>").text(columnas.fichas[0].NumeroLetraSimbolo).appendTo(tr);
    });
    tr.appendTo(table);
  });
  table.appendTo(container);

}

var results = {
  "filas": [{
    "columnas": [{
      "fichas": [{
        "clase": "col vacio",
        "NumeroLetraSimbolo": [""]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["5"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["9"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["3"]
      }]
    }]
  }, {
    "columnas": [{
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["8"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["12"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["2"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["10"]
      }]
    }]
  }, {
    "columnas": [{
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["11"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["6"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["15"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["14"]
      }]
    }]
  }, {
    "columnas": [{
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["1"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["13"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["7"]
      }]
    }, {
      "fichas": [{
        "clase": "col ",
        "NumeroLetraSimbolo": ["4"]
      }]
    }]
  }],
  "posiciones_tablero": [],
  "imagenDeFondo": []
}

displayResults($("#results"), results);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>