Fetching basic information from an API using Ember.js

I am facing an issue with my Ember.js page where I am trying to retrieve data from a REST API.

The API is provided by apiary.io and it returns a simple set of data as shown below:

{"semantics": [
 {key : "11111", name : "Block 1"},
 {key : "22222", name : "Block 2"},
 {key : "33333", name : "Block 3"},
 {key : "44444", name : "Block 4"},
 {key : "55555", name : "Block 5"}
]}

The problem lies in the model which is supposed to fetch data using App.Semantic.find() but it is not displaying the items in the template.

However, the model works fine if I manually set the array values in the route.

App.SemanticRoute = Ember.Route.extend({
    model: function () {
        //return App.Semantic.find();
        return [{key:111,name:"aaaa"},{key:222,name:"qqqqq"},
                {key:3333,name:"bbbb"},key:555,name:"ccc"}];
    }
});

What could be causing this issue?

Here is the link to the API -

Check out the jsFiddle with the code - jsfiddle

For the full code, refer to the snippet below:

var App = window.App = Ember.Application.create({
    VERSION: '1.0',
    rootElement: '#appRoot',
    LOG_TRANSITIONS: true
});
App.deferReadiness(); // do not initialize it until we are ready

App.Adapter = DS.RESTAdapter.extend({
    namespace: 'api',
    url: 'http://bug0r.apiary.io'
});
App.Adapter.map('Semantic', {
    primaryKey: 'key'
});
App.Store = DS.Store.extend({
    revision: 12,
    adapter: App.Adapter
});

App.Router.map(function () {
    // each call will create Ember.Route instance for customizing route
    this.resource("semantic", {
        path: "/"
    });
    this.route("about", {
        path: "/about"
    });
});

/* Symantic model*/
App.Semantic = DS.Model.extend({
    key: DS.attr('string'),
    name: DS.attr('string'),
});

App.SemanticRoute = Ember.Route.extend({
    model: function () {
        return App.Semantic.find();
    }
});

App.advanceReadiness(); // ready for initialization

Edit: 1. JSON api fixed, but still not work.

Answer №1

The response from the API is returning invalid JSON format. The key-value pairs are separated by equal signs instead of colons, and the properties are not enclosed in quotes.

{ "semantics": [
{key = "11111", name = "Block 1"},
{key = "22222", name = "Block 2"},
{key = "33333", name = "Block 3"},
{key = "44444", name = "Block 4"},
{key = "55555", name = "Block 5"}
] }

It should be corrected to:

{ "semantics": [
{"key":"11111", "name":"Block 1"},
{"key":"22222", "name":"Block 2"},
{"key":"33333", "name":"Block 3"},
{"key":"44444", "name":"Block 4"},
{"key":"55555","name":"Block 5"}
] }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Commitment - Resolving the "Expected ')' after argument list" Error

Can someone please help me locate the syntax error in this code snippet? I've been searching for ages! An error occurred: Uncaught SyntaxError: missing ) after argument list promiseArray.push( new Promise(function (resolve, reject) { ...

Firebase version 9 - Retrieve the content of a referenced document

I'm having trouble locating the documentation I need. Within my Firebase Firestore project, there is a collection called users. Within users, there are three collections: companies, policies, and stores. In the policies collection, I have fields for ...

jQuery struggles to locate the active class within the Bootstrap slider

Want to make some changes to the Bootstrap slider? Here is the HTML Code and jQuery: <div id="carousel-slider2" class="carousel slide bs-docs-carousel-example"> <ol class="carousel-indicators"> & ...

Encountered a Error: [$injector:modulerr] while integrating Angular JS with the mysterious Planet 9

I encountered an error after implementing AngularJS in Planet 9. Planet 9 is a tool built on top of SAP UI5, offering drag and drop functionality as well as the ability to include HTML, CSS, and JavaScript. I needed to use ng-repeat for an application, so ...

Can you identify any issues with this Javascript code's "If" condition?

In my JavaScript code, I have an "if condition" that looks like this: for (var i in data) { //Gender.push("Gender " + data[i].JenisKelaminID); if (data[i].JenisKelaminID == 1) { Gender.push("Men"); } if (data[i].JenisKelaminID == 2) { Gend ...

Can the "fixheadertable" plugin be used with AJAX data integration?

I've been using the plugin from for a project, but I need to dynamically add data when creating the tables. Here is the JavaScript code that constructs the table: <script type="text/javascript"> $.ajax({ url: 'dialogs/WMS ...

Error in React Router when using TypeScript

Encountering errors while trying to set up router with React and TypeScript. https://i.sstatic.net/muSZU.png I have already attempted to install npm install @types/history However, the issue persists. Your assistance would be greatly appreciated. Thank y ...

How is it that my initial response appears correct in the first log, but then suddenly changes to a 1?

I've encountered a strange issue where the response appears correctly in the initial log, but later changes to a '1' when console.log(data); is called. The screenshot illustrates the pattern: https://i.sstatic.net/zaXcg.png If you expand ...

Basic HTML and JavaScript shell game concept

After spending several days working on this project, I am struggling to understand why the winning or losing message is not being displayed. The project involves a simple shell game created using HTML, JavaScript, and CSS. I have tried reworking the JavaSc ...

Having trouble with Apple Login functionality in Safari on my Angular application

While implementing apple login in my web app, I encountered an issue with Safari browser. Instead of opening the redirect URI in a new tab, it displays a finger touch enabled login popup. This prevents the passing of the redirect URI and causes problems wi ...

When the forward button is pressed multiple times in the carousel, the alignment changes

I recently noticed that the alignment of my carousel gets disturbed when I repeatedly click the forward button (>). How can I ensure that the carousel moves smoothly one item at a time when I click the forward or backward buttons? <div class="contai ...

The button's background color will vanish if you click anywhere outside the button or on the body of

Struggling with a tabpane created using HTML, CSS, and JavaScript. The problem arises when the background color of the active tab's button disappears upon clicking outside the button or on the body. While switching between tabs, I can change the color ...

Invoke the callback function before executing the next function

There is a function that calls an API: const response = fetch(APIfunctonName, { method: "POST", body: JSON.stringify(searchRequest), headers: { "Content-type": "application/json; charset=UTF-8", }, }) ...

Stylish Navigation Menu Logo/Site Name

Currently in the process of upgrading my website and I have my website name included as part of my menu, as opposed to a logo. This has been an easy solution that has worked well for me. For mobile screens, the template I purchased includes a slicknav men ...

Pulling a div from beneath numerous other divs

I have been attempting to create a test case for a web application we are developing and I am on the verge of finding a solution, but there is one final hurdle that has me puzzled... Our requirement is to enable div elements to be draggable (which is work ...

The Ng-View feature is failing to provide the expected output, instead generating an error message stating "RangeError: Maximum call stack size exceeded

Having trouble with Ng-View not displaying the output correctly. When attempting to route from one page to another, I keep encountering the error message: "RangeError: Maximum call stack size exceeded" Please review the following code and provide sugge ...

Issue with replacing fragment shader in three.js not resolved in versions above 131

I have created an example showcasing the replacement of standard material (fragment and vertex shader) that was functioning properly in three.js versions prior to r131. However, in releases above 131, the changes made to the fragment shader are no longer w ...

The retrieved information remains unchanged even after modifications are made on the subsequent Next.js server-side rendered page

I'm facing an interesting scenario with my application. It consists of two main pages - one displaying user account statistics and the other allowing users to edit these statistics. Both pages are rendered on the server side. When I navigate to the fi ...

What is the best way to dynamically add a class to the right navigation element in Vue.js when the :class binding only accepts boolean values?

My issue involves implementing a fixed navigation bar with the following structure: <nav class='navigation'> <div :class="{ active: }" @click='scrollTo(".test1")'></div> <div :class=" ...

Utilize jQuery's animate method to scroll to the top after toggling a class in Vue

I am in the process of developing a FAQ page using vue.js Here is what I have implemented so far: <li v-for="i in items | searchFor searchString" v-on:click="toggleCollapse(i)" :class="{ collapsed: i.collapse, expanded: !i.collapse }" > <p> ...