Monday, 29 April 2019

Can't Get Json to display in ag Grid just says loading

Using various example I have found on the web I pieced together a simple web app. However although AG Grid (the grid I have chosen to display the data works with the data source provided, it does not work with my own data source which was created using a web service written in Go.

Angular code...

ngOnInit() {

     this.rowData = this.http.get('https://api.myjson.com/bins/ly7d1'); 

  }

This works correctly showing the data on the grid. but when i redirect it to me Go generated data using the following...

 ngOnInit() {

     this.rowData = this.http.get('http://localhost:10000/all');

  }

This grid just says loading...

if I test either link in the browser I get the exact same data formatted in the exact same way...

[{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000}]

Here is the link to the Json:

https://api.myjson.com/bins/ly7d1

I am running both my angular app and the go app on the same machine but there are different services and using different ports...

I could include the Go code but I do not see how relevant it is as the data displays correctly in a browser.

tried to include only the stuff that is relevant but if I have missed something please let me know and I can upload.

HTML Code...

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to !
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>


    <button (click)="onBtExport()">Export to CSV</button>

    <ag-grid-angular
      #agGrid
      style="width: 500px; height: 500px;"
      class="ag-theme-balham"
      [rowData]="rowData | async"
      [columnDefs]="columnDefs"
      rowSelection="multiple"
    >
    </ag-grid-angular>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

Expected Output...

AG Grid display

Update I have now tried the following... Completely rewrote the site and service on my Macbook tried using different ports on the server and the client tried running the server on a different machine disabled all firewalls

none of this makes any difference.



from Can't Get Json to display in ag Grid just says loading

No comments:

Post a Comment