Desarrollo y diseño

Extraer datos JSON a tabla HTML

M
Mockba #1 Ene '20

Buenas tardes.

Recién llevo tres semanas aprendiendo a programar en las cuales las dos primeras he hecho HTML y CSS, lo cual me ha parecido relativamente fácil, hasta que he llegado a Javascript y me encuentro con el primer problema y donde empiezan los lloros.

Tengo que extraer los datos de un JSON (donde hay varios objetos con diferentes atributos) y mostrarlos en una tabla en mi web. Pero no todos los atributos, si no unos en concreto. El JSON tiene esta estructura (he eliminado atributos ya que cada objeto tiene mas de veinte):

"num_results": 450,
         "offset": 0,
         "members": [
              {
                 "id": "A000370",
                 "title": "Representative",
                 "short_title": "Rep.",
                 "first_name": "Alma",
                 "middle_name": null,
                 "last_name": "Adams",
                 "suffix": null,
                 "date_of_birth": "1946-05-27",
                 "gender": "F",
                 "party": "D",
                 "leadership_role": null,
                 "facebook_account": "CongresswomanAdams",
                 "youtube_account": null,
                 "govtrack_id": "412607",
                 "cspan_id": "76386",
                 "votesmart_id": "5935",
                 }

Lo primero que he hecho es crear el thead con los titulos o atributos a mostrar en el html, y un tbody con una id (houseData) vacía debido a que quiero crear los tds en su interior con los datos obtenidos del JSON:

<thead>
              <tr class="table-light">
                <th scope="col">Congressmen</th>
                <th scope="col">Party Affiliation</th>
                <th scope="col">State</th>
                <th scope="col">Years in Office</th>
                <th scope="col">% Votes w/Party</th>
              </tr>
            </thead>
            <tbody id="houseData">
            

        </tbody>
         
          //con <table> en su inicio y </table> en su final, obviamente

Y aquí llega el problema debido a que con lo que hago, no tengo narices a sacar los datos específicos (nombre, estado, años en activo, etc) y mostrarlos en la tabla. No logro sacar la fórmula correcta y hasta ahora solo he conseguido esto sin éxito:

$.getJSON('/JSON/house_data.json',function(members){
  

for(var i = 0; i < members.houseData.length; i++){
    $("#houseData").append(`
      <tr>
        <td>`+members.houseData[i].first_name`</td>     //first_name es uno de los atributos a mostrar, igual que el resto.
      <td>`+members.houseData[i].party`</td>
      <td>`+members.houseData[i].state`</td>
      <td>`+members.houseData[i].in_office`</td>
      <td>`+members.houseData[i].votes_with_party_pct`</td>
     </tr>
  `);
};
}

Donde fallo?

Decir que los datos del JSON me los carga bien en la web usando el código por lo que están conectados correctamente:

document.getElementById("houseData").innerHTML = JSON.stringify(data,null,2);
Grise
Grise #2 Ene '20
#1Mockba:

llevo tres semanas aprendiendo a programar
las dos primeras he hecho HTML y CSS ... relativamente fácil
he llegado a Javascript ... empiezan los lloros.

Ayyy amigo, ¿y si te digo que hasta que no has pillado JS lo que has hecho no se puede llamar programar?

Echa un ojo aquí https://api.jquery.com/jQuery.getJSON/ que te dice lo que tienes que hacer en la función de callback.

1 respuesta
M
Mockba #3 Ene '20
#2Grise:

Ayyy amigo, ¿y si te digo que hasta que no has pillado JS lo que has hecho no se puede llamar programar?

Ya ya, si programando no estoy programando, estoy aprendiendo a hacerlo, De momento dando palos de ciego y cogiendo conceptos.

1 respuesta
Grise
Grise #4 Ene '20
#3Mockba:

programando no estoy programando, estoy aprendiendo a hacerlo

No lo digo por eso, lo digo porque ni HTML ni CSS son lenguajes de programación.

De todos modos la aproximación que estás tomando para aprender a programar no es buena, y yo empezaría por otro tipo de cursos y ejercicios. @HeXaN te puede dar más información.

Nedaim
Nedaim #5 Ene '20

Lo he mirado muy por encima pero si el array es members, ¿Por qué usas members.houseData[j] para accederlo? Sería members[j].atributo. Creo que no es el único error que hay pero es un sito para empezar.

PD: He puesto j en el indice porque me pilla i como codigo y me formatea el texto.

PD2: Y con J tambien, que le den por culo.

PD3: arreglao.

kidandcat
kidandcat #6 Ene '20 Gato Amable

Cuando usas strings multilinea en JS ` para interpolar variables tienes que usar ${}

$("#houseData").append(`
      <tr>
        <td>${members.houseData[i].first_name}</td>
      <td>${members.houseData[i].party}</td>
      <td>${members.houseData[i].state}</td>
      <td>${members.houseData[i].in_office}</td>
      <td>${members.houseData[i].votes_with_party_pct}</td>
     </tr>
  `);

Y los comentarios en HTML no son con //, asi que no pongas eso dentro de tu string

Por lo demás lo has pillado bien, no creo que tengas ningún otro fallo, pero si con eso no te funciona, pasa el código entero

PD: como tu lo has hecho tambien funciona, pero ya que hay un método para interpolar variables, no empieces a cortar el string, lo que te falla en tu código es que te falta un + detrás de las variables:

Esto es lo que quieres: mi string mas una variable: + miVar + fin ==> string + string + string

Tu tienes: mi string mas una variable: + miVar fin ==> string + string string <- error

2 respuestas
M
Mockba #7 Ene '20
#6kidandcat:

Y los comentarios en HTML no son con //, asi que no pongas eso dentro de tu string

Era un poco de cara a explicarme para vosotros.

Gracias! Pruebo y os digo pero sigo sin verlo claro.

M
Mockba #8 Ene '20
#6kidandcat:

PD: como tu lo has hecho tambien funciona, pero ya que hay un método para interpolar variables, no empieces a cortar el string, lo que te falla en tu código es que te falta un + detrás de las variables:

$("#houseData").append(`
      <tr>
        <td>${members.houseData[i].first_name}+</td>
      <td>${members.houseData[i].party}+</td>
      <td>${members.houseData[i].state}+</td>
      <td>${members.houseData[i].in_office}+</td>
      <td>${members.houseData[i].votes_with_party_pct}+</td>
     </tr>
  `);
M
Mockba #9 Ene '20

Vale, empecemos de 0 porque tengo que utilizar los datos de un JS con todos esos datos. Os lo expongo de nuevo, y disculpad la catetada ya que acabo de comenzar:

El archivo JS (el cual se han copiado los datos del JSON) comienza así (muestro el primer miembro de la lista por ejemplo y a su vez del JS):

spoiler

Tengo que crear un tr y un td desde dicho javascript mostrando los valores de cada miembro "first_name", "party", "state", "seniority" y "votes_with_party_pct". Empiezo por partes asignado valores:

var data = ["first_name", "party", "state", "seniority" y "votes_with_party_pct"]

var newTr = document.createElement("tr");
var newTd = document.createElement("td");

El tema es que me encallo para llegar a esos valores. Quiero decir, tengo que crear un loop para que dentro del data abra ''results'' (valor del primer array) luego entre a ''members'' (valor del segundo array) y una vez dentro de ese members (que en esta ocasión será el member en posición 0) me saque los valores arriba comentados.

Si hago un loop con:

for (var i= 0; i<data.members.length; i++)

No me ''entra'' en los siguientes valores de cada array, si no que me coge únicamente el número de miembros del total, omitiendo el interior.

El tbody continúa con su id:

<tbody id=houseData>
            

</tbody>
kidandcat
kidandcat #10 Ene '20 Gato Amable

Si quieres entrar a members tendras que hacer algo asi:

for(let i = 0; i < data.results.length; i++){
  for(let j = 0; j < data.results[i].members.length; j++){
    const memberData = data.results[i].members[j]
  }
}

Usuarios habituales

  • kidandcat
  • Mockba
  • Nedaim
  • Grise

Tags