How do I display data from Rails backend to Ember frontend without saving it in the database and without using Ember-Data?

The problem:

I have used rest-client to pull news articles from newsapi.org through my Rails backend. I can display that data on localhost:3000/articles. I do not (necessarily) want to save this data to a database and would like to simply display it on my Ember frontend after calling it on my Rails backend. I get this error:

Error while processing route: article Assertion Failed: You must include an 'id' for article in an object passed to 'push'

I understand this to mean that my data has no 'id' - which it doesn't. I have no control over the data coming in.

{
  "status": "ok",
  "totalResults": 6868,
  "articles": [
{
  "source": {
    "id": "mashable",
    "name": "Mashable"
  },
  "author": "Lacey Smith",
  "title": "Cannabis may alter the genetic makeup of sperm",
  "description": "A new study suggests that marijuana use can not 
only lower sperm count, but also affect sperm DNA. Read more... More 
about Marijuana, Cannabis, Sperm, Science, and Health",
  "url": "https://mashable.com/video/cannabis-sperm-dna/",
  "content": null
},

Ember-Data doesn't like this because it's not in JSONAPI format and I can't change it to JSONAPI. How do I display this data on my ember frontend without using Ember-Data and without having to save it into my database? The tutorials I've found all have examples using databases and Ember-Data.

What I've already tried:

I tried to save it to my database and load from there, but I'm thinking that might complicate the idea, since I would need to scrape the data and save it to my database and that has proven difficult to do. I'm not experienced with backend stuff and haven't found many answers. If you have an answer for doing it this way, feel free to answer here:

How to automatically save data from url to database

I'm willing to try it out. I thought originally this would be the best way to go. I could save the data and only add to the database when new articles were returned. I'm not having any luck this way, so I thought I'd approach it from another direction.

Thanks for any help!

Solution

If you want to do some processing outside of ember-data, create a service. In your service, you will need to then make an ajax/fetch request to your backend. Let's say you are using ember-ajax to make your requests:

import Service, { inject } from '@ember/service';

export default Service.extend({
  // inject the ember-ajax ajax service into your service
  ajax: inject(),
  //this returns a promise
  getNewsItems(){
    var options = {
      // request options (aka anything needed to authenticate against your api, etc)
    };

    let url = "yourBackendEndpoint/for/this/resource";
    return request(url, options).then(response => {
      // `response` is the data from the server
      //  here you want to convert the JSON into something useable
      return response;
    });
  }
});

Then, let's say in a model hook for some route, you needed this service (which we will say is defined in your-app/services/my-service.js) to fetch the news feed items:

import Route from '@ember/route';
import { inject } from '@ember/service';

export default Route.extend({
  myService: inject(),
  model(){
    let myService = this.get('myService');
    return myService.getNewsItems();
  }
)

I personally use ember-fetch which avoids the jQuery dependency and is useable in all target browsers for my app. I do not use ember-data in any of my apps.