Unable to reach the sub-component of the JSON object that was returned

Question

Unable to reach the sub-component of the JSON object that was returned

For some reason, I can't seem to access a sub object of a returned $Resource object that fetched a group of JSON objects. It's baffling me.

Resource
> $resolved: true
> $then: function (b, g) {var j=e(),h=
> data: Object
  > 519bc5f6b2427a732be1c360: Object

Here is the original JSON content:

{
    "data": {
        "519bc5f6b2427a732be1c360": {
            "id": "519bc5f6b2427a732be1c360",
            "planning": {
                "id": "519bc5f6b2427a732be1c355"
            }
        }
    }
}

I'm struggling with why this code snippet doesn't work as expected:

var training = Training.query()

console.log(training); // outputs the entire $Resource
console.log(training.data); // outputs: undefined

javascript json angularjs

Answer 1

Answer №1

Below is an explanation excerpt from the Angular documentation:

It's crucial to understand that when a $resource object method is called, it immediately returns an empty reference (object or array depending on isArray). Once the data is received from the server, this reference is then filled with the actual data. This feature is quite handy because typically the resource is assigned to a model which is then displayed by the view. By starting with an empty object, there will be no rendering until the data arrives and populates the object. The view will automatically update itself to show the new data. In most cases, there's no need to write a callback function for the action methods.

Here is an example showcasing how this functions:

var training = Training.query(function(value){
  // This serves as the callback function
  console.log(training === value); // true - they are the same object
  console.log(training.data); // now containing the fetched data
});

Answer 2

Below is an explanation excerpt from the Angular documentation:

It's crucial to understand that when a $resource object method is called, it immediately returns an empty reference (object or array depending on isArray). Once the data is received from the server, this reference is then filled with the actual data. This feature is quite handy because typically the resource is assigned to a model which is then displayed by the view. By starting with an empty object, there will be no rendering until the data arrives and populates the object. The view will automatically update itself to show the new data. In most cases, there's no need to write a callback function for the action methods.

Here is an example showcasing how this functions:

var training = Training.query(function(value){
  // This serves as the callback function
  console.log(training === value); // true - they are the same object
  console.log(training.data); // now containing the fetched data
});

Answer 3

Answer №2

One way to retrieve the data is by following these steps:

let trainingData = Training.query(function($value) {
    console.log($value);
    console.log($value.data);
});

Answer 4

One way to retrieve the data is by following these steps:

let trainingData = Training.query(function($value) {
    console.log($value);
    console.log($value.data);
});

Unable to reach the sub-component of the JSON object that was returned

Answer №1

Answer №2

Similar questions

Guide to utilizing element reference with material UI components in Angular

The regular expression should consist of just letters and a single dot

Creating unit test in Angular for a service that utilizes constants and testing it with Jasmine

Pull in class definitions from the index.js file within the node_modules directory

Stopping navigation in Vue router

Finding the correct value in Ajax is proving to be a challenge

Unable to successfully remove item by ID from mongoDB within a Next.js application

Disabling the smooth scrolling feature on tab navigation

Tips for preventing duplicate entries in an AG Grid component within an Angular application

The function call to 'import firebase.firestore()' results in a value

Tips for implementing FontAwesome in Nuxt3

TimestampError found in JSON API response

Testing reactive streams with marble diagrams and functions

JavaScript array with more than 4 elements

NodeJS: Retrieve Over 10,000 Images From the Server

clear the input field of any entered text type

Create waypoints on multiple elements

Utilize PHP to filter JSON data and dynamically populate a dropdown menu with the results

AngularJS: When the expression is evaluated, it is showing up as the literal {{expression}} text instead of

Dealing with JSON decoding for an unknown data type: Tips for utilizing JSONDecoder