Я комментирую тебе следующее 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"
}
]
Следующий - конечный и ясный аспект - внутри таблицы, но у него нет стилей
Протестируй это в твоей команде asГ - как я перемещаю это тебя и deberГ, - когда привет функциональный.
Привет я 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;
};
AquГ - я оставляю одну тебе pequeГ±a funciГіn в чистом языке сценариев JavaScript, который, pasГЎndole array объектов и id таблицы, будет наполнять таблицу dinГЎmicamente. cГіdigo estГЎ прокомментированный (и podrГ, - чтобы уменьшать немного, потому что он повторяется), но aquГ - я оставляю одну descripciГіn cГіmo, функционируй:
.keys()
, чтобы получать ключи Г-ndice от первого элемента 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>