The ng-repeat function is failing to show any data on the HTML view, instead only displaying a row for each property present

HTML Code:

<div ng-repeat="addr in addrShipData">
     <input type="radio" name="resp1" ng-checked='true'/>
      {{addr.addressLine1 +","+addr.addressLine2+", "+addr.city+ ","+addr.state+", "+addr.country+", "+addr.zipCode+","+addr.contactNum}}
 &nbsp;&nbsp;&nbsp;&nbsp; <a>Edit</a>
</div>

JavaScript Code:

 var dataObj = [];
  var shipDataObj = [];
  //var addrShipData =[];
  function shipData(shipDataObj){

      for(i=0;i<shipDataObj.length;i++){
          dataObj.push(addressLine1 = shipDataObj[i].addressLine1);
          dataObj.push(addressLine2 = shipDataObj[i].addressLine2);
          dataObj.push(city = shipDataObj[i].city);
          dataObj.push(state = shipDataObj[i].state);
          dataObj.push(country = shipDataObj[i].country);
          dataObj.push(zip = shipDataObj[i].zipCode);
          dataObj.push(contactNum = shipDataObj[i].contactNumber);
      }
  }
   appServices.getAddress(userData.customerId).then(function (data){

                    if (data){  
                          console.log(data);
                          $scope.shipDataObj = data;
                          shipData(data);
                        console.log("dataObj properties: " + dataObj);
                        $scope.addrShipData = dataObj;
                        console.log($scope.addrShipData);
                     if ($scope.addrShipData){
                                storeLocally.set('shipInfo :', $scope.addrShipData);
                          }
                          else{
                                $scope.addressError = "No Address Found!";                            
                          }         
                    console.log("address info:- " + $scope.addrShipData);
                    }
               }),
                function (data) {
                    if (data.status == 500) {
                      $scope.addressError = "Oops! No Address Found!";
                    };
                }       

I have encountered an issue where the values in $scope.addrShipdata are displaying on the console, but not appearing in the HTML view.

The output is as follows:

On Console: 1234 Waller Ave, Suite 1, Fremont, California, USA, 246326, 213-435-4365

On HTML View: it shows blank. O ,, , , , , Edit O ,, , , , , Edit O ,, , , , , Edit O ,, , , , , Edit O ,, , , , , Edit O ,, , , , , Edit O ,, , , , , Edit

No errors are being displayed, and I am unable to determine the cause of this issue within the code.

Answer №1

The object definition you have created does not match what is expected in the ng-repeat template. It is important to create a complete object and push it to dataObj in order to add new properties to it.

Here is the corrected code:

for (i = 0; i < shipDataObj.length; i++) {
    dataObj.push({
        addressLine1: shipDataObj[i].addressLine1,
        addressLine2: shipDataObj[i].addressLine2,
        city: shipDataObj[i].city,
        state: shipDataObj[i].state,
        country: shipDataObj[i].country,
        zip: shipDataObj[i].zipCode,
        contactNum: shipDataObj[i].contactNumber
    });
}

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

Having trouble with Wookmark not working in Jquery UI?

Hey there, just wanted to share that I'm currently utilizing the Wookmark jQuery plugin $.post('get_category',data={type:'All'},function(data) { $.each(data,function(item,i){ var image_ ...

What is the best practice for accessing specific components of JSON values that are delimited by colons?

When working with an API that returns a JSON containing strings separated by colons, such as: { "id": "test:something:69874354", "whatever": "maybe" } It may be necessary to extract specific values from these strings. For example, in the given JSON s ...

Obtaining data from JSON arrays

My current challenge involves extracting data from the following link: and storing it in my database. However, I am encountering difficulties with manipulating the array in order to retrieve the last unix datetime. Despite multiple attempts to extract th ...

JQuery fixed div bounces unpredictably when scrolling

Currently, I have a scenario on my webpage where there is a div called RightSide positioned on the far right side below another div named TopBanner. The TopBanner div remains fixed at the top of the screen even when the user scrolls down, which is exactly ...

Checking for correct format of date in DD/MM/YYYY using javascript

My JavaScript code is not validating the date properly in my XHTML form. It keeps flagging every date as invalid. Can someone help me figure out what I'm missing? Any assistance would be greatly appreciated. Thank you! function validateForm(form) { ...

Having trouble making the JavaScript mouseenter function work properly?

Hi there, I'm having trouble with this code and I can't figure out why it's not working. $('#thumbs > li').mouseenter(function() { $(this).find("div").fadeIn(); }).mouseleave(function(){ $(this).find("div").fadeOut(); ...

How can I retrieve objects using the JSON function?

I need to design a function that returns objects like the following: function customFunction(){ new somewhere.api({ var fullAddress = ''; (process address using API) (return JSON data) })open(); } <input type= ...

Obtain the JSON object by provided criteria

In the given JSON data, how can I access an object based on the provided applicationName? { "apps": [ { "applicationName": "myTestApp", "keys": [ { "key": "app-key", ...

What could be causing my completed torrents to sometimes not be saved to my disk?

Currently, I am working on developing a small torrent client using electron and webtorrent. Although everything appears to be functioning correctly initially, there is an issue where sometimes the resulting files from a finished download are not being save ...

Is there a way to find the JavaScript Window ID for my current window in order to utilize it with the select_window() function in

I'm currently attempting to choose a recently opened window while utilizing Selenium, and the select_window() method necessitates its WindowID. Although I have explored using the window's title as recommended by other sources, and enabled Seleni ...

Efficiently handle user authentication for various user types in express.js with the help of passport.js

Struggling to effectively manage user states using Passport.js in Express.js 4.x. I currently have three different user collections stored in my mongodb database: 1. Member (with a profile page) 2. Operator (access to a dashboard) 3. Admin (backend privi ...

Utilizing jQuery's .slidedown alongside Prototype's .PeriodicalUpdater: A Comprehensive Guide

I am currently working on creating an activity stream that automatically updates with the latest entries from a database table every time a new row is added. Right now, I am using Prototype's Ajax.PeriodicalUpdater to continuously check for new entri ...

Converting an HTML form with empty values into JSON using JavaScript and formatting it

While searching for an answer to my question, I noticed that similar questions have been asked before but none provided the solution I need. My situation involves a basic form with a submit button. <form id="myForm" class="vertically-centered"> ...

Deactivating elements on a website

Is there a way to prevent multiple transactions due to unintended repeated clicks on a button by disabling all webpage elements when the button is clicked? Suggestions include using a div that can be layered on top of the elements when the button is click ...

Create a word filter that doesn't conceal the words

I have a code snippet that filters a JSON object based on name and title. I also have an array of specific words and I would like to modify the filter to highlight those words in the text without hiding them. $scope.arrayFilter=["bad,bill,mikle,awesome,mo ...

Using the JQuery template with $.get function does not produce the desired result

Working on populating a table using a Jquery Template can be tricky. One challenge is incorporating a json file via an ajax call for the population process. $(document).ready(function() { var clientData; $.get("/webpro/webcad/lngetusuario", funct ...

Toggle draggable grid in jQuery

Imagine I have a grid set up using the following code: $( "#dragIt" ).draggable({ grid: [ 15, 15 ] }); Now, there is a checkbox located below the div. Is there a way for me to switch the grid on and off by toggling the checkbox? I've searched the of ...

Unable to save or create files in Store.js

Recently, I've been trying to save a file on client storage using Store.js. After changing the date with store.set and logging it to the console successfully, I encountered an issue where the data was not being saved in the app directory as expected. ...

Issue with JavaScript not executing upon clicking the submit button on a form within the Wordpress admin page

In the admin pages of my Wordpress installation, I have created an HTML form. My goal is to validate the data inputted when the submit button is pressed using a Javascript function. If the data is not correctly inserted, I want alerts to be displayed. Desp ...

Attempting to employ jQuery to generate a text input that allows for inputting multiple incorrect answers

I am putting together a webpage for a friend who has allergies. The idea is that users can input a food item, and the page will indicate whether or not my friend is allergic to it. I have compiled an array of his food allergies, and the goal is for the pag ...