Showing information using ng-repeat from a JSON collection

Here is the JSON data I am working with:

$scope.track = [{
        title: 'Group Therapy 150 with Above & Beyond and Maor Levi',
        date: new Date(),
        link: "https://www.mixcloud.com/widget/iframe/?embed_type=widget_standard&embed_uuid=a38e8d96-7372-430b-91b3-7549a408ac7c&feed=https%3A%2F%2Fwww.mixcloud.com%2FPlayLifePodcast%2Fdj-nyk-play-life-podcast-003%2F&hide_cover=1&hide_tracklist=1&replace=0",
        tracklist: ['Adam Rickfors - Twang Machine (Original Mix)', 'Cirez D - On Off (Tannergaard Remode)', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats', 'Matt Nash & Felix Leiter - Heartbeats'],
        guest: 'Guest Mix by Pep & Rash',
        guestlist: ['Tom Staar - Bora / S.H.M - Save The World', 'Dimitri Vegas, Like Mike, Ne-Yo - Higher Place (Tujamo Remix)', 'New_ID & Funk Machine - I Wanna Move', 'Knife Party - Lrad', 'Knife Party - Lrad', 'Knife Party - Lrad', 'Knife Party - Lrad', 'Knife Party - Lrad', 'Knife Party - Lrad']
    }]

This is how I am attempting to use it:

<div id="podcast-wrapper">
    <h1>{{track.title}}</h1>
    <h4>{{track.date | date}}</h4>
    <iframe width="100%" height="180" ng-src="{{track.link | trustAsResourceUrl}}" frameborder="0"></iframe>
    <div class="row">
        <div class="col-sm-6">
            <h3>TrackList</h3>
            <ul>
                <li ng-repeat="song in track.tracklist">{{song}}</li>
            </ul>
        </div>
        <div class="col-sm-6">
            <h3>{{track.guest}}</h3>
        </div>
    </div>
</div>

Although the title, date, and guest name display correctly, I am encountering issues trying to display the track list using ng-repeat within the li elements.

Any assistance on this matter would be greatly appreciated. Thank you.

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

Updating the current view in Rails with newly fetched data

NOTE: To make it easier, skip to the EDIT part below. Thank you! I am currently working on adding a simple feature to my app. The feature involves a view with a chart that depends on two query parameters: :from and :to. I am using "Chartkick" and below a ...

"Unable to receive a response from the GraphQL server after sending a POST

Attempting to send a POST request to my graphql server running on localhost:4000 in order to retrieve users resulted in issues. Initially, I used the following code snippet: getUsers(){ var query = `{users(id:""){username}}` fetch('http://loca ...

Simple steps to activate and monitor global events using EaselJS

Can EventDispatcher be used to create a global event that any object in the hierarchy can listen and respond to? What is the best approach to implement this in EaselJS, and is it advisable from a general perspective? ...

React does not display newly updated states when they are modified

React does not trigger a re-render on the screen when updating the state and the useEffect hook is not invoked either. https://i.sstatic.net/YsA22.gif After clicking the "change" button, React fails to update with the new values and the useEffect hook re ...

Modify FullCalendar: Adjust background color for agendaDay

Although this question has been posed before, the answer remains elusive. I am simply looking for a way to change the background-color of the TD to a specific range. For instance, in my calendar where time slots are structured in 15-minute intervals from ...

Combining the value of $(this) to create an identifier name

I am attempting to create a hover effect on an h1 element that triggers the glowing effect on a span element with an id that corresponds to the value of the h1. While I have successfully set up a glowing effect for a sentence, I am struggling to replicate ...

Enhance your double jquery/ajax post with a touch of success

I have implemented a method to send form data from a web app to a server-side PHP script and also to QuickBase. The PHP script processes the signature, adds it to a PDF, and sends the result via email. Everything is functioning correctly, except for the l ...

Issue with useEffect in React hooks not rendering the div element

Within my Chart component, the useEffect function acts similar to componentDidMount, where it should initially render the DOM before calling fetchChartData. However, I am encountering an issue where I receive null in console.log("111111111", document.getEl ...

Exploring the process of sending various variables from PHP to a jQuery function

I have a jQuery function that prints charts using the jqPlot framework. I need to print multiple charts with different options, so I have to call this function several times with varying values. My current approach is not very elegant: //----- index.php: ...

What is the best way to update a deeply nested array of objects?

I have an array of objects with nested data that includes product, task, instrument details, and assets. I am attempting to locate a specific instrument by supplier ID and modify its asset values based on a given number. const data = [ { // Data for ...

Is there a way to update the parent value when the child is activated?

I need to create a dropdown menu for users to select their email provider - either gmail, hotmail, or outlook. Once they make a selection, I want the button text to update accordingly. The catch is that I can only use bootstrap for this project and cannot ...

Step-by-step guide on incorporating CSS box-shadow with the .style JavaScript property

I have a JavaScript code snippet that looks like this: document.getElementById("imgA").style.box-shadow = "0 0 5px #999999"; The hyphen in box-shadow is causing an invalid assignment exception to be thrown by the JavaScript engine (specifically in Firefo ...

What's the best way to extract the refresh_token from this JSON in Java/Android programming?

Hello, I need assistance with extracting the refresh_token from this JSON data. Can anyone help me with that? {"scope":"https://api.paypal.com/v1/vault/credit-card https://uri.paypal.com/services/payments/futurepayments https://uri.paypal.com/services/i ...

Obtain JSON data from an array

I am currently using the Slim framework to create a REST API. In my code, the route for tasks is defined as follows: $app->get('/tasks', 'authenticate', function() { global $user_id; $response = array(); $items = array() ...

Having difficulty entering text into a "Search Input Field" that is a react component in testcafe

Struggling to input text in a "Type to search dropdown" that is a react component. While able to click on the component, typing any text seems to be an issue. Listed below is an example of the code: import { Selector } from 'testcafe'; test(&ap ...

Grunt is unable to remove files located beyond the present working directory

Trying to set up a HelloWorld angularjs app with yeoman has been quite the challenge. Even after completing the installation and generating the App, running the command grunt to start the App yielded an error message. Running "clean:server" (clean) task W ...

Step-by-step guide to automatically submitting a form after obtaining geolocation without the need for manual button-clicking

I am looking for a way to automatically call a page to get geolocation data, and then submit the form to my PHP page with the values of getlat and getlon without the need to click a submit button. I have tried implementing the code below, however, despit ...

Exploring LZMA compression in conjunction with next.js

Is anyone familiar with using the lzma algorithm to compress video, photo, text, etc. in the Next.js framework? I have searched everywhere but couldn't find a solution. I haven't found a proper demonstration or answer anywhere. I would greatly a ...

What is the best way to modify the class of my <li> element with JavaScript?

My asp.net project utilizes a master page that includes a list within it. <ul id="navigation"> <li id="li1" runat="server" class="selected"><a href="Events.aspx">Events</a></li> <li id="li2" runat="server ...

Is there a way to effectively incorporate window.clearInterval() into this javascript code to achieve the desired outcome

In my quest to create a pomodoro clock, I decided to experiment with window.setInterval() and its counterpart window.clearInterval before delving into actual coding. However, I've encountered an issue with getting window.clearInterval() to function as ...