Вопросы Теги

Как обращение файла JSON в таблицу с динамическими колоннами в HTML

То, что он перемещает, состоит в том, что я хочу прочитать файл JSON, и в том, что как только он это прочитал он верит в таблицу начиная с файла с Вашими соответствующими полями. Как например:

{
"nombre":"Ana",
"edad":20,
"Hobbie":"Cantar" }

И верят в таблицу: Назовите Возраст Оббье Анну 20 Cantar introducir la descripción de la imagen aquí

1
задан 10.03.2018, 08:53
3 ответа

Я комментирую тебе следующее serГ - в первый идеал, который показывал бы продвижение на как ты это строишь.

Однако я показываю тебе пример, который я точно только что сделал, где я занимаю

1.-VueJS (Чтобы переворачивать или размещать самую простую дату способа внутри таблицы во мне HTML)
2.-Axios (для управления просьб AJAX) 3. - Для того, чтобы VueJS функционировал, нуждайся в том, чтобы быть внутри контекста этикетки HTML с одним пойдите, что я например поместил ему app 4. - С директивным органом v-for я получаю тот же результат поездки как будто он использовал цикл foreach, но более чистым способом на уровне cГіdigo 5. - Я объявляю пустую договоренность, названную данные, которая despuГ©s ее peticiГіn посредством Axios irГЎ наполняя формой dinГЎmica 6.-mГ©todo mounted используется, чтобы показывать, что cГіdigo инстанции Vue я функционировал как только вышеупомянутая инстанция была создана, и готовая 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Sex</th>
            </tr>
            <tr v-for="dato in datos">
                <td>{{ dato.name }}</td>
                <td>{{ dato.age }}</td>
                <td>{{ dato.sex }}</td>
            </tr>
        </table>
    </div>
    <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
    <script src="https://unpkg.com/axios@0.17.1/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                datos: []
            },
            methods: {
                getDatos: function() {
                    axios.get('data.json'). then(response => {
                        this.datos = response.data
                    })
                }
            },
                mounted: function (){
                    this.getDatos()
                }
        })
    </script>
</body>
</html>

Я Участвую в рыцарском турнире aquГ - внизу оставляю тебе data.json, который изобретает меня для примера, помещаю оба в ту же папку 

[
    {
        "name": "Alfredo",
        "age": 28,
        "sex": "masculino"
    },
    {
        "name": "Jorge",
        "age": 20,
        "sex": "masculino"
    }
]

Следующий - конечный и ясный аспект - внутри таблицы, но у него нет стилей

introducir la descripción de la imagen aquí Протестируй это в твоей команде asГ - как я перемещаю это тебя и deberГ, - когда привет функциональный.

1
ответ дан 28.10.2019, 04:27
  • 1
    Perdó n из-за того, что он не переслал продвижение, мне был сделан интересным способ, в котором ты используешь Vue, но то, что он не нашел, как делать состоит в том, чтобы имя колонн было тем же самым, что тот JSON, например, если я меняюсь: " nombre":" Ana" из-за " name": " Ana". будь должен менять имя колонны. – Aza Jero 10.03.2018, 10:58
  • 2
    имя колонн в таблице HTML ты это распределяешь в волю для того, чтобы они были равны тем твоего JSON, нет проблемы –  10.03.2018, 10:59
  • 3
    Дело в том, что то, что я не хочу, состоит в том, чтобы имена были установленными и могли меняться в момент изменения файла – Aza Jero 10.03.2018, 11:16
  • 4
    Дай мне возможность и má s поздно я отвечаю тебе –  10.03.2018, 11:20
  • 5
    Если, большое спасибо заранее – Aza Jero 10.03.2018, 11:22

Привет я soluciГіn пойди из-за этой стороны, вводит следующий cГіdigo в твой рукописный шрифт и способствуй названный тому, чтобы он соответствовал. Ты должен звонить в нее funciГіn перемещая его переменную, у которой есть дата в формате json. 

function jsonToHtmlTable(data) {

    data = JSON.parse(data);

    var table = document.createElement("table");
    var thead = table.createTHead();
    var tbody = table.createTBody();

    var col = [];
    for (var i = 0; i < data.length; i++) {
        for (var key in data[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }

    var cabecera = thead.insertRow(-1);

    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");
        th.innerHTML = col[i];
        cabecera.appendChild(th);
    }



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

        tr = tbody.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = data[i][col[j]];
        }
    }

    return table;

};
2
ответ дан 28.10.2019, 04:27

AquГ - я оставляю одну тебе pequeГ±a funciГіn в чистом языке сценариев JavaScript, который, pasГЎndole array объектов и id таблицы, будет наполнять таблицу dinГЎmicamente. cГіdigo estГЎ прокомментированный (и podrГ, - чтобы уменьшать немного, потому что он повторяется), но aquГ - я оставляю одну descripciГіn cГіmo, функционируй:

  • Использует .keys(), чтобы получать ключи Г-ndice от первого элемента array объектов (понимают, что у всех объектов будут те же ключи).
  • поверил, что линия заголовка dinГЎmica с ключами Г-ndice (не важно cuГЎles они были, ты можешь пытаться с различными JSON и seguirГЎ функционируя).
  • пересекает array объектов, наполняя ячейки данными об объекте.

AquГ - ты можешь видеть это функционируя: 

// estos datos los podrías obtener via AJAX 
var datos = [
  {
    "nombre": "Ana",
    "edad": 20,
    "Hobbie": "Cantar"
  },
  {
    "nombre": "Alberto",
    "edad": 23,
    "Hobbie": "Programar Videojuegos"
  }
];

// llama a la función que genera la tabla
crearTablaDesdeArrayObjetos(datos, "miTabla");

//---------------------------------------

function crearTablaDesdeArrayObjetos(misDatos, idTabla) {
  var claves = [];

  // generamos la cabecera basada en las claves del primer elemento
  if (misDatos.length > 0) {
    // con Object.keys(array) obtenemos las claves del objeto
    claves = Object.keys(misDatos[0]);
    // creamos una fila
    let fila = document.createElement("tr");
    // para cada clave
    for (let x = 0; x < claves.length; x++) {
      // creamos una celda y rellenamos los datos
      let celda = document.createElement("th");
      celda.textContent = claves[x];
      fila.append(celda);
    }
    // añadimos la fila a la tabla
    document.getElementById(idTabla).append(fila);
  }

  for (let x = 0; x < misDatos.length; x++) {
    let fila = document.createElement("tr");
    // para cada clave
    for (let y = 0; y < claves.length; y++) {
      // creamos una celda y rellenamos los datos
      let celda = document.createElement("td");
      celda.textContent = misDatos[x][claves[y]];
      fila.append(celda);
    }
    // añadimos la fila a la tabla
    document.getElementById(idTabla).append(fila);
  }
}
<table id="miTabla">
</table>
1
ответ дан 28.10.2019, 04:27