How can Angular's ng-repeat access objects in arrays?

I am working with Laravel 5.5 and I am attempting to extract the comments object

The comments display properly in the console,

when using this code snippet:

<% post.comments.comment_body%> 

No content is returned

but when I use:

<% post.comments%> 

An array of objects related to the comment is shown. However, I am encountering difficulties retrieving specific information.

This is what my code looks like:

Post Controller

public function getPosts()
{
    // Code logic here
}

main.js

// JavaScript logic here

HTML Template

 <!-- HTML template markup -->

Answer №1

post.comments is an array just like mypost mentioned earlier. Therefore, you will need to loop through the comments in the same manner as you would with posts:

<div id="comments" class="col-md-offset-2  panel-default">
    <div ng-repeat="comment in post.comments">
        <div style="font-size:10px;" id="eli-style-heading" class="panel-heading">
            <h6><% comment.name %><h6>
        </div>
        <figure>
            <p> <% comment.comment_body%></p>
        </figure>
    </div>
</div>

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

Are there any limitations on default angular directives in relation to A, E, C, and M?

Recently diving into Angular and wondering about any limitations on the default angular directives. Is it possible to override those directives and set restrictions? I'm working on an app and aiming to prevent anyone from utilizing directives through ...

AngularJS is not triggering the $watch function

I'm facing an issue with the $scope.$watch function, as it's not being triggered when expected. In my HTML document, I have a paginator using bootstrap UI: <pagination total-items="paginatorTotalItems" items-per-page="paginatorItemsPerPage" ...

Submitting to MVC Controller results in ViewModel remaining empty

My ASP.NET MVC controller action and viewmodel setup is as follows: public JsonResult Upload(UploadModel MyModel) { // Code to process MyModel } public class UploadModel { public string Name; } In my Angular code, I have a function for submittin ...

What steps can you take to resolve the issue of FirebaseError: When collection() is expected to be a CollectionReference, DocumentReference, or FirebaseFirestore?

I'm currently working on integrating Firebase with next.js, and I've encountered an error in the console that reads: FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore B ...

Is it common practice to provide a callback function as a parameter for an asynchronous function and then wrap it again?

app.js import test from "./asyncTest"; test().then((result)=>{ //handle my result }); asyncTest.js const test = async cb => { let data = await otherPromise(); let debounce = _.debounce(() => { fetch("https://jsonplaceholde ...

The attempted creation of the ui.tree module failed with the error: [$injector:nomod] Unable to find module 'moduleName'! This could be due to a misspelling of the module name or

In my AngularJS project, I am utilizing a third-party library called angular-ui-tree to display data. To integrate this library, I need to include ui.tree as a dependency in my main app module. Following the instructions provided in the link, I have succes ...

Dynamic anime-js hover animation flickering at high speeds

I have implemented the anime-js animation library to create an effect where a div grows when hovered over and shrinks when moving the mouse away. You can find the documentation for this library here: The animation works perfectly if you move slowly, allow ...

Resize the main container to fit the floated elements

I've been working on constructing a family tree, and the last part of the functionality is proving to be quite challenging for me. My family tree consists of list elements that are all floated to the left. Currently, when the tree expands beyond the ...

What is the best way to replicate a synchronous ajax call? (mimicking synchronous behavior with asynchronous methods)

Given that a "native" synchronous ajax call can block the user interface of the browser, it may not be suitable for many real-world scenarios (including mine). I am curious to know if there is a way to mimic a synchronous (blocking) ajax call using an asy ...

Angular and Node integration with Firestore authentication

I need some guidance with integrating an Angular application and a Node.js API, both using Firestore (Firebase). We have encountered an issue when validating tokens for authenticated users - the token never seems to expire. Even after logging out in the An ...

Is it not possible to include Infinity as a number in JSON?

Recently, I encountered a frustrating issue that took an incredibly long time to troubleshoot. Through the REPL (NodeJS), I managed to replicate this problem: > o = {}; {} > JSON.stringify(o) '{}' > o.n = 10 10 > JSON.stringify(o) ...

Using a filter in ng-grid to customize cell templates

I recently encountered an issue where a cell template I created relied on a filter, but unfortunately the filter was not being applied as expected. The specific cell in question is defined as {field:'status', displayName:'Status', cell ...

When I attempt to click on the Cancel button, the database row remains undeleted

After a user clicks on the "Cancel" button, I want to reset the source and remove the iframe to prevent the file from being uploaded to the server. This function is currently working as intended. However, I am facing an issue where even after clicking on ...

Is there a workaround for utilizing a custom hook within the useEffect function?

I have a custom hook named Api that handles fetching data from my API and managing auth tokens. In my Main app, there are various ways the state variable "postId" can be updated. Whenever it changes, I want the Api to fetch new content for that specific p ...

Looking for a JavaScript function that will enable the acceptance of commas and spaces

How can I modify this integer validation function to allow for commas and spaces to be entered during the keydown event? function intValidate(event) { if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || even ...

CSS/JS Label Positioner using Mootools, perhaps?

I have been tasked with incorporating a form into our website. It seems simple at first, but this particular form has some interesting JavaScript code in place to ensure that the label for each input field sits inside it. This is a clever feature, but unfo ...

Implementing a document update event using jQuery

On my WordPress site, I am using a responsive lightbox plugin. When an image is clicked, it opens a popup box with the ID fullResImage. Now, I would like to incorporate the Pinch Zoomer function to it. Do I need to bind a function for this, or is there a s ...

Examining a feature by solely utilizing stubs

I've been immersed in writing tests for the past few weeks. In my workplace, we utilize Mocha as our test runner and Chai for assertions, with Sinon for creating stubs. However, there's a recurring issue that's been bothering me. I've w ...

I'm having trouble getting the code to work properly after the "else" statement using both jQuery and Javascript. My head is

Being a newcomer to javascript and jquery, debugging and viewing log files seem like a challenge compared to php. Any help from experienced individuals would be greatly appreciated. Although my code mostly works fine, I'm having trouble with the if/e ...

Sorting an array of subdocuments within a populated query result in Node.js with Mongoose

I am looking to fetch recently submitted articles by members based on time. In the Member Schema, there is an array of _id values for submitted articles. Below are the details of the Member and Article Schemas: Member Schema const mongoose = require( ...