Отображение массива из данных json на карты
Итак, я немного потерялся здесь, и мне нужна помощь. У меня есть json, который приходит с сервера с данными, которых я не знаю.
Исходя из этого, я нашел решение для отображения данных в html здесь, на SO: https://stackoverflow.com/a/50352965/9721446
Но проблема в том, что каждый «элемент» - это запись из массива, поэтому, если i ngfor array, он выводит каждую строку как элемент, и я хочу, чтобы этот элемент был всеми записями каждого результата.
вот html:
<ng-container *ngFor = "let item of singleArray | paginate: { itemsPerPage:411, currentPage: p} ">
<!-- All the entries -->
<div class = "w3-container">
<!-- Table view-->
<table class = "center">
<tr *ngIf = "!item.tag.includes('URL') && !item.tag.includes('linkChal')">
<td><div class = "col-xs-auto thick">{{item.tag.toLowerCase() | translate}}</div></td>
<td class = "tab">{{item.value}}</td>
</tr>
<tr *ngIf = "item.tag.includes('URL')">
<td>Link da entrada: </td>
<td> <a href = "{{item.value}}">- Ver mais -</a></td>
</tr>
<tr *ngIf = "item.tag.includes('linkChal')">
<td>Link do Challenge: </td>
<td> <a href = "{{item.value}}">- Challenge -</a></td>
</tr>
</table>
<div style = "background-color: #ff7d2a">
<ul *ngIf = " item.tag.includes('---------')"><p>New Entry</p></ul>
</div>
</div>
</ng-container>
Ц:
for(let i in res)
{
//array with entities from json
this.entity.push(i);
for(let j in res[i])
{
let val = Number(j)+1;
this.cont.push(i +" - nº: " + val );
this.singleArray.push({
tag: i,
value: val
});
for(let t in res[i][j])
{
this.test.push(t);
this.cont.push(t +" - "+ this.responseList[i][j][t]) ;
if (t.split(".",2)[1] === "CompositeId")
{
this.test.push("URL:");
//Get the id
this.cont.push(this.moduleName + "/" + t.split(".",2)[0] + "/" + this.responseList[i][j][t].match(/=(.*)_/)[1]);
//debugger;
this.singleArray.push({
tag: "URL:",
value: this.moduleName + "/" + t.split(".",2)[0] + "/" + this.responseList[i][j][t].match(/=(.*)_/)[1]
});
}
else if (t.split(".",2)[1] === "Challenge")
{
this.singleArray.push({
tag: "linkChal",
value: this.moduleName + "/" +t.split(".",2)[1] + "/" + this.responseList[i][j][t].match(/=(.*)_/)[1]
});
}
else {
this.singleArray.push({
tag: t,
value: this.responseList[i][j][t]
});
}
}
this.test.push("\n");
this.cont.push("\n");
this.singleArray.push({
tag: "---------\n",
value: "--------\n"
});
//it ends an item here
}
}
Вот результат, который у меня есть:
Каждая строка является записью из массива, большой вопрос в том, как преобразовать все строки / записи до "Новая запись" и сделать один элемент в ngfor и отобразить данные в карточке, которая у меня уже есть ..)
Я попытался создать массив и вставить в него singleArray (надеясь, что каждая запись этого нового массива была элементом, который я хочу), в конце для (пусть j в res [i]) на .ts, но он просто повторил все записи, создавая кучу записей .. здесь, в конце этого for, я попытался протолкнуть массив с чем-то, затем ngfor (он дает мне количество элементов, которые я хочу, но тогда у меня нет результатов для доступа к ним ..)
У кого-нибудь раньше была такая проблема? заранее спасибо
Обновлено: вот как выглядит singleArray:
Ответы 2
Лучше всего следовать принцип единственной ответственности и разделить проблемы каждого класса.
Прекратите пытаться делать все это в представлении и разделите ответственность за форматирование данных, и проблема станет намного проще.
- Создайте новый класс для определения модель, который вы хотите использовать в представлении ваш
- Пусть ваше представление реализует эту новую идеальную модель, которую вы контролируете
- Создайте несколько тестовых данных, чтобы все выглядело так, как вы хотите
- Создайте новый класс, вся ответственность которого состоит в том, чтобы превратить модель внешний из ответа api в эту новую модель внутренний
- json2ts может помочь сгенерировать лучшую внешнюю модель из ответа, но в этом случае от него мало пользы.
После того, как вы сделаете вышеуказанное, на основе вашего образца выходных данных, будет довольно просто преобразовать внешнюю модель во внутреннюю. Трудно передать это, но если предположить, что дефис является разделителем элементов, вы можете просто сделать что-то вроде следующего:
const externalItems = // data from api
const internalItems = [];
let currentInternalItem = {};
externalItems.forEach(item => {
if (item.tag.startsWith('---------')) {
internalItems.push(currentInternalItem);
currentInternalItem = {};
} else {
currentInternalItem[item.tag] = item.value;
}
});
Это сгруппирует массив обратно в объект, который вы можете использовать в своем представлении.
Хорошо, это немного проясняет. Приведенный мной пример кода изменится, но принцип останется прежним. В приведенном мной примере кода я просматриваю список объектов и генерирую новый объект на основе каждого результата. Вместо того, чтобы помещать все в плоский массив {tag, value}, вы можете сгенерировать массив объектов «Card» со всеми парами тег / значение для каждой карты. Затем в вашем представлении вы можете создать представление Card для каждого объекта Card.
Я думаю, что я слишком усложняю ... Цель здесь - отобразить то, что поступает из JSON, в определенные места, например, на карточку, с заголовком и содержимым, чтобы лучше отображать результаты.
У меня есть служба, которая предоставляет мне JSON, который я никогда не знаю, что внутри, это зависит от поискового запроса и может предоставить много информации. Например:
Если используется термин "вызов":
.
Мой файл .ts - это только console.info, который исходит из api.
ngOnInit() {
var setting = {setting to connect the server..}
enter code here
$.ajax(settings).done((rest) => this.response(rest));
}
response(res){
console.info(res);
}
Как я могу отображать эти данные так, как я хочу? Извините за длинный пост и за то, что не объективен по основному вопросу.
Я предполагаю, что я использую принципала с единой ответственностью, потому что каждый модуль как собственный объект: - У меня есть служба, которая извлекает серверный JSON, о котором я никогда не знаю, что в нем. - У меня есть .ts, который читает json и создает ключ-значение массива, чтобы протолкнуть каждый поступающий элемент. - затем я использую html, чтобы отобразить его наилучшим образом. Я не могу создать интерфейс на основе json, потому что я никогда не знаю, что внутри ... Я пытаюсь прояснить вопрос ... потому что "------" и т.д. добавлены мной на стороне .ts, в отделить каждый результат ..