In this component i have "output-console.component.html (1-47)


<!-- output-console.component.html -->
@if (dataEntries() && dataEntries().length > 0) {
  <div class="border bg-body-secondary console">
    <samp>
      @switch (detectedLanguage()) {
        @case ("json") {
          @for (data of parsedJson(); track data) {
            @if (data) {
              <ngx-json-viewer [json]="data" />
            } @else {
              <pre><code>{{ data }}</code></pre>
            }
          }
        }
        @case ("xml") {
          @for (data of parsedXml(); track data) {
            <pre><code [highlight]="data | prettyXml" language="xml"></code></pre>
          }
        }
        @case ("csv") {
          <table class="table table-striped">
            <thead>
              <tr>
                <th *ngFor="let header of getCsvHeaders(parsedCsv()[0])">
                  {{ header }}
                </th>
              </tr>
            </thead>
            <tbody>
              @for (row of parsedCsv(); track row) {
                <tr>
                  <td *ngFor="let cell of getCsvValues(row)">{{ cell }}</td>
                </tr>
              }
            </tbody>
          </table>
        }
        @default {
          @for (data of dataEntries(); track data) {
            <pre><code>{{ data }}</code></pre>
          }
        }
      }
    </samp>
  </div>
}


output-console.component.ts (1-109)


import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
} from '@angular/core';
import { Highlight } from 'ngx-highlightjs';
import { PrettyJsonPipe } from '../shared/pipes/pretty-json.pipe';
import { PrettyXmlPipe } from '../shared/pipes/pretty-xml.pipe';
import { NgxJsonViewerModule } from 'ngx-json-viewer';
import Papa from 'papaparse';

@Component({
  selector: 'app-output-console',
  standalone: true,
  imports: [
    CommonModule,
    Highlight,
    PrettyJsonPipe,
    PrettyXmlPipe,
    NgxJsonViewerModule,
  ],
  templateUrl: './output-console.component.html',
  styleUrls: ['./output-console.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OutputConsoleComponent {
  public consoleData = input.required<string[]>();

  public dataEntries = computed(() => {
    let entries: string[] = [];
    for (let dataString of this.consoleData()) {
      entries.push(
        ...dataString
          .split('\n')
          .map((line) => line.trim())
          .filter((line) => line.length > 0),
      );
    }
    return entries;
  });

  public detectedLanguage = computed(() => {
    return this.detectLanguage(this.dataEntries()[0]);
  });

  public parsedJson = computed(() => {
    if (this.detectedLanguage() !== 'json') {
      return [];
    }

    return this.dataEntries().map((dataString) => {
      try {
        return JSON.parse(dataString);
      } catch (e) {
        console.error('JSON Parsing Error:', e);
        return null;
      }
    });
  });

  public parsedXml = computed(() => {
    if (this.detectedLanguage() !== 'xml') {
      return [];
    }

    return this.dataEntries();
  });

  public parsedCsv = computed(() => {
    if (this.detectedLanguage() !== 'csv') {
      return [];
    }

    let allData = this.dataEntries().join('\n');
    const result = Papa.parse(allData, { header: true });
    return result.data;
  });

  public getCsvHeaders(row: any): string[] {
    return row ? Object.keys(row) : [];
  }

  public getCsvValues(row: any): any[] {
    return row ? Object.values(row) : [];
  }

  public detectLanguage(data: string): 'json' | 'xml' | 'csv' | 'plaintext' {
    data = data.trim();
    try {
      JSON.parse(data);
      return 'json';
    } catch {
      // Not JSON
    }

    if (data.startsWith('<')) {
      return 'xml';
    }

    if (data.includes(',') || data.includes('\n')) {
      return 'csv';
    }

    return 'plaintext';
  }
}". In that code, for the ngx-json-viewer add a margin or smth or to mark the difference between each json data object. For the xml convert the xml to json so i can display it nicely with the collapse like in ngx-json-vieiwer. Now for the csf it's intersting because the data might be imbrincated like that "id,data
44,{"id":43,"name":"UltraCool X1000","pret":81.21532}
22,{"id":93,"name":"PowerMax Pro","pret":13.48043}
25,{"id":94,"name":"EcoFriendly Organic","pret":89.45522}
53,{"id":24,"name":"SleekTech X3","pret":91.36689}
36,{"id":15,"name":"PureHarmony Pro","pret":12.96355}
10,{"id":94,"name":"EssentialPlus 5000","pret":36.83238}
1,{"id":12,"name":"LuxuryElite X","pret":36.70388}
75,{"id":96,"name":"SmartHome ProPlus","pret":4.54850}
42,{"id":82,"name":"ActiveLife 360","pret":6.78366}
76,{"id":87,"name":"Wellness Max","pret":48.25816}
". How i can still display it nicely? Basically i have a form where i can create syntetic data and i can return the same data as json, xml and csf. Here's the same data for json "{"id":77,"data":{"id":33,"name":"Sleek Keyboard","pret":43.40570}}
{"id":35,"data":{"id":43,"name":"Rustic Lamp","pret":95.45631}}
{"id":13,"data":{"id":51,"name":"Gourmet Coffee","pret":7.87204}}
{"id":35,"data":{"id":76,"name":"Modern Chair","pret":61.59583}}
{"id":86,"data":{"id":92,"name":"Elegant Watch","pret":55.74756}}
{"id":28,"data":{"id":32,"name":"Stylish Backpack","pret":17.40195}}
{"id":15,"data":{"id":32,"name":"Organic Skincare","pret":35.98504}}
{"id":91,"data":{"id":23,"name":"Handcrafted Mug","pret":3.93249}}
{"id":57,"data":{"id":98,"name":"Vintage Rugs","pret":47.97660}}
{"id":3,"data":{"id":93,"name":"Luxury Headphones","pret":24.04353}}
" and one for xml "<root><id>51</id><data><id>22</id><name>Sleek Chair</name><pret>27.12793</pret></data></root>
<root><id>93</id><data><id>7</id><name>Rustic Lamp</name><pret>54.91120</pret></data></root>
<root><id>69</id><data><id>60</id><name>Vintage Desk</name><pret>20.65288</pret></data></root>
<root><id>25</id><data><id>50</id><name>Modern Sofa</name><pret>99.22069</pret></data></root>
<root><id>71</id><data><id>35</id><name>Elegant Table</name><pret>87.85466</pret></data></root>
<root><id>83</id><data><id>89</id><name>Cozy Bed</name><pret>35.56172</pret></data></root>
<root><id>65</id><data><id>46</id><name>Luxury Ottoman</name><pret>7.19845</pret></data></root>
<root><id>70</id><data><id>30</id><name>Minimalist Shelf</name><pret>24.46764</pret></data></root>
<root><id>42</id><data><id>57</id><name>Chic Mirror</name><pret>37.98704</pret></data></root>
<root><id>69</id><data><id>5</id><name>Stylish Clock</name><pret>20.40125</pret></data></root>
"