AngularJS encounters a JSON parsing issue when retrieving data from the server, but not when using static data

Check out my plunker example here

When I modify the code around line 23:

app.controller('MainCtrl', function($scope) {
    $scope.links = [...];
});

to

app.controller('MainCtrl', function ($scope, $http) {
            $http.get('data.json')
                .success(function(data, status, headers, config) {
                    $scope.links = data;
                });

I'm not able to see any data being displayed.

I believe this is because the data is loaded after the UI has already been rendered.
How can I ensure proper data binding in this scenario?

Appreciate any help or suggestions.

javascriptjsonangularjsparsingdata-binding

Answer №1

The issue at hand involves the discrepancy in variable references, where changing one does not affect the other. For example, when you write:

a = b

Updating "b" will not automatically update "a". This is why in ng-init, initializing with a value like:

submenu = links

will not keep "submenu" in sync with changes to "links."

To address this issue, you can set up a watch on the scope variable "links" so that any updates to it will also update "submenu."

You can check out the plunkr for an example.

Here's the code snippet:

$scope.$watch('links',function(newValue){
   $scope.submenu=newValue;
});

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

A guide on extracting command line arguments in Python

I'm looking to execute a Python script with various arguments that need to be parsed and executed within the script itself. For instance, running c:\file.py -t version -m user -p pwd -i id. What would be the best way to parse these arguments and ...

pythonparsing

Utilize PHP server to serve index.html for all routes with the combination of React and react-router-dom

Usually, I develop websites using a combination of reactjs, node, and express, then deploy them to Heroku. Everything works smoothly with this setup. However, I recently received a request to create a reactjs frontend with a PHP backend and deploy it to c ...

javascriptphpreactjsreact-routerreact-router-dom

Endlessly scrolling text using CSS

Is it possible to create a continuous rolling text effect on an HTML page without any gaps, similar to a ticker tape display? For example, displaying "Hello World ... Hello World ... Hello World ... Hello World ..." continuously. I attempted using the CSS ...

javascripthtmlcssanimation

Guidelines on transforming several layers of nested json into a structured sql table

After finding assistance on StackOverflow, I managed to make progress with this task. However, I am now struggling with converting JSON to SQL tables. Any guidance on how to solve the issue would be greatly appreciated. { "Volumes": [{ "Availa ...

pythonmysqljsonpandas

Using the Greasemonkey browser extension, one can employ the waitForKeyElements utility to trigger a function once a designated element becomes visible on the webpage

(In connection to the question I posted on Stack Overflow). I have been developing a userscript for metal-archives.com, which can be found here. When you navigate to a band page (like this example), you will see the DISCOGRAPHY section and its sub-tabs ...

javascriptjquerygreasemonkey

Conceal the .dropdown-backdrop from bootstrap using solely CSS styling techniques

Is there a way to hide the .dropdown-backdrop element from Bootstrap for a specific dropdown on a webpage using only CSS? I found a solution that involves Javascript, you can view it on JSFiddle here. However, I am hoping to achieve this without relying o ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

Quirks in TailwindCSS template literals behavior

Looking at this specific component: const SaleBadge = ({ textContent, badgeColor }) => { return ( <Badge className={`bg-${badgeColor}-200 hover:bg-${badgeColor}-300 animate-pulse align-middle ml-2`} variant="secondary"><Pe ...

javascriptnext.jstailwind-csstemplate-literals

Enabling and Disabling Input Fields Based on Selections in VueJS

Originally submitted on es.stackoverflow.com by José: I came across an example in JavaScript that works, but I'm struggling to implement it in vue.js. I've been attempting it for some time without success. Apologies for any inconvenience. < ...

javascripthtmlvue.js

Tips for enabling browser back and forward functionality in a one-page website design

Building on the previous discussion about optimizing a horizontal sliding layout (Most efficient way to do a horizontal sliding layout), I'm curious if it's feasible to enable the back and forward buttons in the browser when implementing a single ...

javascripthtmlbrowsercross-browseruser-experience

Guide for converting innerHTML text within an Angular JS controller

Hey! I'm currently working on a Angular JS web application that supports two languages: English and Italian. So far, I've managed to translate all the text from my HTML page like this: {{translation.ERROR_12}} Now, I need to pass some text from ...

angularjsangularjs-directive

Concentrate on providing input for sending keys when the app-advanced-select feature is visible

I have a query about accessing a specific element. Here is the scenario: <app-advanced-select e2e="test"> <div> <div> <input> </div> </div> </app-advanced-select> My goal is to input text int ...

javascriptseleniumprotractor

Enhancing Javascript HREF links

Occasionally, I visit URLs that have page numbers indicated in the HREF. As these page numbers change, keeping track of the last one visited becomes a challenge. Cutting and pasting into a text file is a temporary solution; therefore, I intend to replace i ...

javascripthref

JavaScript: XHR struggles with managing multiple asynchronous requests

Hey there, I'm currently attempting to access a single resource multiple times with various parameters. Here's what I have so far: Essentially, I am making requests for the following domains: var domains = [ 'host1', 'host2&apos ...

javascriptajaxasynchronousxmlhttprequest

I want to show error messages using jquery only when the username or password is entered incorrectly. How can this be achieved?

document.getElementById("buttonClick").addEventListener("click", mouseOverClick); function mouseOverClick(){ document.getElementById("buttonClick").style.color = "blue"; } $("#buttonClick").hover(function() { $(this).css('cursor',&apos ...

javascriptjqueryhtmlcss

Even with the code enclosed in a try-catch block, UnhandledPromiseRejection errors are still being

I keep encountering an UnhandledPromiseRejection error even though I have used a try-catch block and await Promise.all in my code. const express = require('express'); const app = express(); const port = 3003; function testPromise(n) { r ...

javascriptnode.jsexpresspromisees6-promise

Unable to process PHP JSON data, retrieving information successfully but encountering technical issues

Can anyone help me figure out what I did wrong? $(document).ready(function(){ var f_page = "ID"; var t_page = "ID"; function add_commas(number) { if (number.length > 3) { var mod = number.length % 3; var out ...

jqueryjson

how to name a collection variable in MongoDB shell using JavaScript

When using the mongo shell with JavaScript, is it possible to dynamically set the collection name in order to work with multiple collections? db.collection.insert() ...

javascriptmongodbshell

I'm seeking assistance in grasping the reasoning behind this particular 'for loop'

Currently engaged in learning on Code Academy, where I am enjoying the process. The topics of push and nested for loops were introduced rather quickly without much initial information. My grasp on the logic is somewhat there, but I would appreciate some he ...

javascriptarraysfor-loop

What is the best way to create a fade effect when toggling the class "hover"?

I've searched and searched online, but haven't found a solution. I want a specific section of my webpage to gradually appear when I hover over it. Below is the CSS code I'm using: .status .admin { display: none; } .status.hover .adm ...

javascriptjqueryhtmlcsscoffeescript

Is there an equivalent to Java's join method in NodeJs?

Is there an equivalent to the Java join method in NodeJs for multi-threading? I want to achieve parallel execution of multiple methods in NodeJs similar to how it is done in Java. My Requirement: I have three methods (m1(), m2(), and m3()) that calculate ...

javascriptjavanode.js