0

I'm tasked with integrating an existing UI into another already existing Angular app and got hung up on this...

I know the data + transform works well outside of the Angular context.

I didn't see an npm package for the jquery json2html so I tried to import that part in an ad-hoc manner by saving it along side the component's directory.

It produces ERROR TypeError: $(...).json2html is not a function...

...
import * as $ from 'jquery';
import json2html from 'json2html';
import * from './jquery.json2html.min.js';

...

$('#myTable > tbody').json2html(data,transform);
conner.xyz
  • 6,273
  • 8
  • 39
  • 65
  • 2
    Using jQuery within Angular is generally seen as an anti-pattern – user184994 Nov 09 '18 at 22:13
  • Honestly, this feels like something that could be done _super simply_ with standard Angular patterns, without the need for any sort of library.... – random_user_name Nov 09 '18 at 22:15
  • Why don't you use jspdf(and maybe html2canvas) in angular? [Here](https://www.c-sharpcorner.com/article/convert-html-to-pdf-using-angular-6/)'s a guide with an example. I've used this in angular 6 and it's worked like a charm – Ray Soy Nov 09 '18 at 22:36
  • @user184994 that's why I included the context about integrating two separate applications. The goal is to get this done, even if it's dirty. – conner.xyz Nov 12 '18 at 15:28
  • 1
    @RaySoy no I don't want PDFs. I want an interactive HTML table within the DOM. – conner.xyz Nov 15 '18 at 22:47
  • @cale_b Sounds great. How? – conner.xyz Nov 15 '18 at 22:47

2 Answers2

0
    npm install node-json2html


    ...
    import json2html from 'json2html';
    import * as $ from 'node-json2html';

    ...

ngAfterViewInit(){
    $('table#myTable > tbody').json2html(data,transform);

}

or,

... 
import json2html from 'json2html';
import * as $ from './jquery.json2html.min.js';

...

$('table#myTable > tbody').json2html(data,transform);

Link:- http://www.json2html.com/

Mahi
  • 3,748
  • 4
  • 35
  • 70
  • This will cause errors, you've already imported jquery as `*`, and doing `declare const $:any;` will clash with the previous declaration – user184994 Nov 09 '18 at 22:22
  • This doesn't work. You're squashing the jquery import like @user184994 mentioned. – conner.xyz Nov 12 '18 at 15:45
0

before anything you have to add jQuery in your angular.json then in the component you would to use jQuery with it do so

....
declare let $: any;    // you can use "jQuery" keyword instead of "$"

@component({
  selector: '...',
  templateUrl: ['...'],
  styleUrls: ['...']
})
export class JqueryExampleComponent implements onInit {

  constructor(private eleRef: ElementRef) {}

  ngOnInit() {
    $(this.eleRef.nativeElement).find('#myTable > tbody').json2html(data,transform);
  }
}

when you use $(this.eleRef.nativeElement) that gonna get the tree root of the component dom then .find('selector') to get the element you want

Amir Fawzy
  • 468
  • 5
  • 12
  • The problem here is that `json2html` is somehow not in scope, not that I can't perform selections using jquery. – conner.xyz Nov 15 '18 at 22:17