Having trouble retrieving data from one object nested within another object?

Here is the specific data that I am referring to

[ 
    { 
        "id":1,
        "date":"2020-01-02",
        "start_time":"11:32:25",
        "end_time":"11:32:26",
        "editions":null,
        "coordinates":null,
        "ranking":null,
        "user_id":3,
        "instructor_id":2,
        "course_id":2,
        "package_id":null,
        "location_id":3,
        "created_at":null,
        "updated_at":null,
        "student_schedules":[ 
            { 
                "id":1,
                "student_schedule_id":1,
                "calification":75,
                "approved":0
            }
        ],
    }
]

I'm attempting to retrieve the 'calification' from the student_schedules. I've tried the following methods but encountered errors, where history contains all the data:

history.student_schedules['calification']

history.student_schedules.calification

Unfortunately, these attempts have failed and resulted in errors like:

TypeError: Cannot read property 'calification' of undefined

[Vue warn]: Error in render: "TypeError: Cannot read property 'calification' of undefined"

I'm unsure why these errors are occurring, as the data should be present. How can I properly access this information?

javascriptlaravelvue.js

Answer №1

history is a collection of data in the form of an array filled with objects.

To access information from the first item in the history array, you would use history[0].

Similarly, student_schedules is also a group of data stored in an array of objects, so the process repeats:

history[0].student_schedules[0].calification

You can distinguish between an object and an array by looking at their representations: {} for an object and [] for an array.

Answer №2

Both records and timetables are arrays that can hold multiple objects. To retrieve an object from an array, you must specify its index, as shown below:

records[0].timetables[0].notes

If the arrays only contain one object, you can omit the []

{ 
    "id":1,
    "date":"2020-01-02",
    "start_time":"11:32:25",
    "end_time":"11:32:26",
    "editions":null,
    "coordinates":null,
    "ranking":null,
    "user_id":3,
    "instructor_id":2,
    "course_id":2,
    "package_id":null,
    "location_id":3,
    "created_at":null,
    "updated_at":null,
    "timetables":
        { 
            "id":1,
            "timetable_id":1,
            "grade":75,
            "approved":0
        }
}

You can then access the data like this:

records.timetables.notes

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

What is the correct way to securely send the username and password from a ReactJS frontend to the backend for authentication?

My React application includes an onChange function on a form that collects username and password. Upon submission, the username and password are sent to the server side using redux dispatch in Node.js. On the server side, I am authenticating the credentia ...

javascriptnode.jsreactjs

To retrieve a CSV file on the frontend, simply click a button in an AngularJS application that communicates with NodeJS and ExpressJS

How can I download a .csv file from the frontend? This is the code I am currently using: $http.get('/entity/consultations/_/registerationReport' ) .success(function (data) { myWindow = window.open('../entity/consultations/_/r ...

javascriptnode.jsangularjsmongodbexpress

UCS-2 in Node.JS: Understanding Big-Endian Byte Order

Currently, I am utilizing Node.JS. In my project, I require support for big-endian UCS-2 buffers, which is not natively offered by Node's buffers that only support little-endian format. How can I achieve this specific requirement? ...

javascriptunicodenode.jsbufferendianness

Troubleshooting: Issues with Custom Image Loader in Next.js Export

I'm encountering a problem while attempting to build and export my Next.JS project. The issue lies with Image Optimization error during the export process. To address this, I have developed a custom loader by creating a file /services/imageLoader.js ...

javascriptdeploymentnext.js

Tips for Interacting with an API using curl -X Command in Vue

My dilemma is that I have stored wishlist items in a cookie, but when using an incognito tab, the cookie isn't available and the data can't be fetched. I've found a solution in the form of this extension that provides 3 endpoints: https:// ...

vue.jsvuejs2vue-componentvuetify.js

Transform an angular1 javascript circular queue implementation for calculating rolling averages into typescript

I am currently in the process of migrating a project from Angular 1 to Angular 2. One of the key components is a chart that displays a moving average line, which requires the use of a circular queue with prototype methods like add, remove, and getAverage. ...

javascriptangulartypescriptangular2-services

Generating radio buttons dynamically and automatically selecting the correct button using AngularJS

In the questionnaire form, each question is looped over along with its answers to create radio buttons for each answer. The answer object contains a property called answered, which can be true or false depending on whether the answer has been previously ...

javascripthtmlangularjs

Choose the text by clicking on a button

I currently have: <span class="description">Description 1</span> <button class="select">Select!</button> <span class="description">Description 2</span> <button class="select">Select!</button> <span clas ...

javascriptjqueryselect

AngularJS Firebase Login Scope Value Not Retained After Refresh

I have stored my unique username in the variable "$scope" and I am trying to access it from different views once the user logs in, using: However, when I refresh the page immediately after the user successfully signs in, the value of "$scope" goes bac ...

javascriptangularjsangularjs-scopefirebase-realtime-databasefirebase-authentication

Is it better to set the language of Puppeteer's Chromium browser or utilize Apify proxy?

Looking to scrape a website for French results, but the site supports multiple languages. How can I achieve this? Is it best to configure Puppeteer Crawler launch options using args, like so: const pptr = require("puppeteer"); (async () => { const b ...

javascriptnode.jspuppeteercheerioapify

Is it considered acceptable to utilize a map function as a replacement for a traditional for loop without including

In my project, I use the map function extensively. Even when I don't need to return anything, I simply use {} instead of () and treat it like a for loop. Is this an acceptable practice? Also, what about not using any key? There are times when I don&ap ...

javascriptreactjs

Arranging data structures in JavaScript: Associative arrays

I'm facing a major issue. My task is to organize an array structured like this: '0' ... '0' ... 'id' => "XXXXX" 'from' ... 'name' => "XXXX" ...

javascriptjqueryarrays

Ensure to close the Ajax request from PHP before the script finishes executing

Is there a way to terminate an Ajax request from PHP before the script finishes executing? For instance, if a user requests php.php and it includes the line 'echo "phpphp"', how can we ensure that the Ajax request is completed with the data "phpp ...

phpjavascriptjqueryajax

Exploring Material UI: Understanding the contrast in functionalities between incorporating the Icon component and the Material Icons node

I am looking to incorporate Material Icons into my application. I have come across two methods provided by Material UI for adding the same icon to my site: Using the <Icon /> component, which is part of the @material-ui/core package: <!-- Add t ...

javascriptreactjsmaterial-ui

Creating a Vue component that leverages the computed property from a mixin

My situation involves a straightforward component that utilizes a mixin shared across various components that have similar functionalities. However, upon running it, an issue arises: The error message "Property or method 'activeClass' is not ...

javascriptvue.jsvuejs2vue-component

Having trouble assigning the current page in NextJS navigation

I have a unique setup for my navigation system in my NextJS project: const menu = [ { name: 'Home', href: '/home', icon: HomeIcon, current: true }, { name: 'About', href: '/about', icon: InfoIcon, current: fa ...

javascriptreactjsnext.jsjsx

Utilizing multiple optional key values in Vue Router

When working with vue-router, I am faced with the challenge of creating a route that can handle multiple optional parameters. For example, the route needs to be able to handle scenarios like: /something/a/1/b/2/c/3 /something/a/1/b/2 /something/a/1/c/3 /s ...

javascriptvue.jsvue-router

Substitute a particular element within a text

I'm currently working on an Angular 9 application where I'm implementing search filters for the Shopify Graphql API. As part of this process, I am constructing a query which looks like: first: 1, query: "tag:'featured-1'", af ...

javascriptangular

What is the best approach for migrating event bus functionality to Vuex store?

At the moment, I have set up an event bus to trigger methods in specific Vue components from other unrelated components. With a fully functional Vuex store in place, my goal is to eliminate the need for the event bus and transition this functionality to t ...

vue.jsvuejs2vuex

Error: Unable to locate module: Unable to locate '@material-ui/core/Container'

Encountering an error in the browser: Error message: Module not found: Can't resolve '@material-ui/core/Container' The search for the component is directed towards my components directory instead of node_modules. Unfortunately, changing ...

javascriptreactjsmaterial-ui