Как вернуть множественный результат в новой строке с помощью JSON.parse в Angular?

ProgramBox

Как вернуть множественный результат в новой строке с помощью JSON.parse в Angular?

Post author:admin
Запись опубликована:30 апреля, 2023
Post category:Вопросы по программированию

#javascript #json #angular #typescript

Вопрос:

У меня есть файл json с несколькими результатами.

1 — Пример одного jsonChanges: "{"field":"cancerType","oldValue":"Lentigo maligna melanoma","newValue":"Primary malignant melanoma of g canal"}"

В этом случае я успешно возвращаю все значения из списка

2 — Пример двух множественных значений jsonChanges: "{"field":"date","oldValue":"","newValue":"Tue Mar 26 00:00:00 GMT 2019"}, {"field":"techniqueType","oldValue":"","newValue":"Intralesional"},{"field":"response","oldValue":"","newValue":"Complete Response"}"

В этом случае он возвращает пустое значение.

В моем component.ts я использую

    getList(patientId?: number, pageNo?: number) {
        const auditTrailSubscription = 
        this._auditTrailService.getAuditTrailUrl(patientId, pageNo, 
        GridConfig.ITEMS_PER_PAGE)
          .subscribe(
           result => {
            try {
              this.totalItems = result.recordsCount;
              this.auditTrailList = result.lstRecords;
              this.auditTrailList.forEach(x => x.jsonChanges = 
          JSON.parse(x.jsonChanges));          
          } catch (e) {
            console.log(e);
          }
        },
        err => {
          this.handleError(err);
        }
      );

    this.addSubscription("auditTrail", auditTrailSubscription);
  }

В моем html я использую

    <tr *ngFor="let at of auditTrailList | paginate: { itemsPerPage: 
      _ITEMS_PER_PAGE, currentPage: crtPage, totalItems: totalItems }"
        [attr.data-row-id]="at.userId">
        <td>{{ at.userName }}</td>
        <td>{{ at.timestamp | date:  CUSTOM_DATE_FORMAT  }}</td>
        <td>{{ at.entityName }}</td>
        <td>{{ at.jsonChanges.field }}</td>
        <td>{{ at.jsonChanges.oldValue }}</td>
        <td>{{ at.jsonChanges.newValue }}</td>
      </tr>

Страница выглядит следующим образом

https://imgur.com/BE9BYsS

Мой вопрос в том, как получить несколько значений и отобразить их в новой строке.Для возврата единственного значения это нормально. Но для нескольких значений я понятия не имею.

1. Код в примере (2) не является допустимой строкой JSON. Это должно быть обернуто в массив. Вы можете исправить эту проблему, добавив скобки вручную JSON.parse(`[${x.jsonChanges}]`) ; однако я рекомендую попытаться решить это в API, если это возможно.

2. @Gasim вручную У меня нет доступа к серверной части. Эти значения являются динамическими. Я просто использую свой собственный сервис (URL, который отправляется серверной частью). В моем случае есть 2 таблицы, когда пользователь изменяет некоторые значения, он автоматически сохраняет новые данные в новую таблицу. Я просто извлекаю данные из этой таблицы. Этот JSON изменяет просто строку, а не массив. Для одной строки значения field> oldvalue>newvalue JSON.parse возвращает значения без каких-либо проблем, но в случае нескольких строк это выдает синтаксическую ошибку.

3. @Gasim к сожалению, они закрыли задачу для серверной части, и мне нужно разобраться самостоятельно. Кстати, JSON.parse( [${x.jsonChanges}] ) не сработал и ничего не возвращает, но не выдает исключение в консоли.

Ответ №1:

вы можете использовать этот код в своем компоненте:

 this.str='{"field":"referringPhysician","oldValue":"Medical oncologist","newValue":"Cardiac surgeon"},{"field":"cancerType","oldValue":"Lentigo maligna melanoma","newValue":"Primary malignant melanoma of g canal"}';
this.arrData=this.str.split('},');
this.arrData.forEach((val, key) => {
  if(key != this.arrData.length-1){
    this.allData.push(JSON.parse(val '}'));
  }else{
    this.allData.push(JSON.parse(val));
  }
});
console.log(this.allData);

затем вы должны указать user *ngFor в вашем html-файле

1. Я пытался, но, к сожалению, он по-прежнему возвращает пустой.

2. В моем этом коде показано (в консоли): 0: {field: "referringPhysician", oldValue: "Medical oncologist", newValue: "Cardiac surgeon"} 1: {field: "cancerType", oldValue: "Lentigo maligna melanoma", newValue: "Primary malignant melanoma of g canal"} . не могли бы вы, пожалуйста, показать свой код, в котором вы реализуете мой пример?

3. Я не могу вызвать слишком длинный код. Но я использовал ваш подход. На самом деле this.str это не статическое значение, подобное этому. Я получаю json из базы данных. И этот json в формате string. Для возврата однострочных изменений, таких как всего 1 поле => Старое значение и новое значение, это работает. Для нескольких случаев не

4. да, this.str это статический вариант, насколько вы понимаете. вы можете поместить свою строку в this.str строку json, полученную из вашей базы данных, и посмотреть вашу консоль для тестирования.

5. это SyntaxError , может быть, вы допускаете какую-то ошибку внутри JSON.parse при вызове. можете ли вы показать мне только ту часть, где вы используете мой подход

Ответ №2:

Добавление дополнительного массива и получение результатов из этого массива решили мое решение.

      try {
        this.results = [];
        this.totalItems = result.recordsCount;
        this.auditTrailList = result.lstRecords;
        this.auditTrailList.forEach(x => {
          const jschanges = JSON.parse(`[${x.jsonChanges}]`);
          jschanges.forEach(z => {
            this.results.push({
              userName: x.userName,
              timestamp: x.timestamp,
              entityName: x.entityName,
              field: z.field,
              oldValue: z.oldValue,
              newValue: z.newValue
            })
          })
        });