Displaying array data in AngularJS view

I am encountering an issue while trying to display values from a JSON array on my Angular JS table. The web service is called and the JSON array is retrieved successfully when the page loads. However, I am facing difficulties in displaying these values on the view. Despite following the same procedure as before, the data does not appear as expected.

Below is the controller code:

assets.controller('DetallTipusCtrl', function ($scope, $http, $routeParams){
                $http.get('http://10.0.203.73/WS/ws.php/tipusactius/getDetails/'+$routeParams.param).success(function(data) {
                    $scope.atrb = data;
                });
                $scope.param = $routeParams.param;    
            });

And here is the corresponding view:

<table class="table" ng-controller="DetallTipusCtrl">
                    <tr>
                        <th>#</th>
                        <th><a href="">Atribut</a></th>
                        <th><a href="">Mida</a></th>
                        <th><a href="">Tipus</a></th>
                    </tr>
                    <tr ng-repeat="atribut in atrb | orderBy:sortField:reverse">
                        <td></td>
                        <td>{{atribut.nomAtribut}}</td>
                        <td>{{atribut.midaAtribut}}</td>
                        <td>{{atribut.valor}}</td>
                    </tr>
                </table> 

Although the JSON array is correctly structured, I am unable to see any output on the view. If anyone has advice or solutions, your help would be greatly appreciated. Thank you!

Edit: The JSON object:

{"nomAtribut":"fgdsgsfd","midaAtribut":"16","valor":"String","tipus_actius_idtipus_actius":"26","nom":"yiuhdfiau837629875wf"}

Solution:

The issue was due to the JSON array being presented as a single JSON object. To iterate over and display its properties, I used the following approach:

<tr ng-repeat="(key, value) in atrb">
    <td>{{value.propertie}}</td>
</tr>

Answer №1

Your reply is actually an object, not an array as you may have thought. To loop through the properties of the object, you can use this method:

<tr ng-repeat="(index, item) in items">
    <td>{{item}}</td>
</tr>

In case you need to display properties conditionally, you can check the index.

Answer №2

Make sure to implement this code in the success callback of your AJAX request

    $http.get('http://10.0.203.73/WS/ws.php/tipusactius/getDetails/'+$routeParams.param).success(function(data) {

   $scope.$evalAsync(function(){$scope.atrb = data;});

});

Answer №3

Your reply is not in array format

        <td>{{atrb.nameAttribute}}</td>
         <td>{{atrb.sizeAttribute}}</td>
         <td>{{atrb.value}}</td>

Use the code above to show your content

Answer №4

To perform an AJAX call using $http, you can use the following code snippet:

$http.get('http://10.0.203.73/WS/ws.php/tipusactius/getDetails/' + $routeParams.param)
.then(function(response) {
    $scope.atrb = response.data;
});

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 transfer a function from a component.ts file to a service file?

I recently wrote a function in my component.ts file that sends a PUT request. It was working perfectly fine, but I decided to refactor and move the function to a service.ts file. After moving it, the functionality seems to have broken. Whenever I click on ...

JavaScript and HTML: Importing local JSON and considering module accessibility

My journey with javascript / html is just beginning, and I find myself struggling to grasp the import / module functionality. My current challenge involves loading a json file into javascript. After some research, I came across using import as the best wa ...

Error message: The Luxon DateTime was not recognized as a valid Luxon DateTime object

I'm having trouble understanding the workings of Luxon... I'm using Redux Toolkit to initialize the state as shown below import {DateTime} from "luxon" interface TestStateProps { startDate: DateTime, endDate: DateTime, } const ...

Custom geometry in Three.js raycaster detects incorrect object

I am facing a challenge with the default cube's appearance in wireframe mode, as it is made up of triangles instead of squares. To combat this, I created my own geometry which looks satisfactory. However, I have noticed that the raycaster does not fu ...

Learn how to send or submit data using the Form.io form builder

I am currently working on a dynamic drag and drop form builder, and I'm struggling to figure out how to log the data from the form. Below is the component.html file where I am implementing the drag and drop form: <div> <form-builder ...

A guide on breaking down a variable into an array using batch scripting

I am currently working on creating a text adventure game using batch scripting and I am looking for a way to split a variable like 'set userinput=take book' into an array. My goal is to develop a program that can divide strings into individual ar ...

Tips on how to perform a server-side redirection to a different page in a Nextjs application without refreshing the page while maintaining the URL

I am working on a [slug].js page where I need to fetch data from an API to display the destination page. export async function getServerSideProps({ query, res }) { const slug = query.slug; try { const destination = await RoutingAPI.matchSlu ...

How to Retrieve a Variable from the Parent Component in a Child Component using Angular (1.5) JS

I am currently working on abstracting the concept of a ticket list building into an angular application using 2 components. 1st component --> ("Smart Component") utilizes $http to fetch data and populate an array called populatedList within the parent ...

What is the best way to retrieve promiseValue from the response array?

I've run into some challenges while using Promise.all() for the first time with two get-methods. When I check the response in my console log, I can see the data I'm trying to fetch under promiseValue. However, I'm unsure of how to access it. ...

What steps should I take to resolve the MongoDB issue I'm encountering: MongoError: The dollar sign ($) preceding the field '$cond' in 'energy.$cond' is not allowed for storage?

Whenever I attempt to implement the code snippet below for MongoDB, I encounter this error: var updateDoc = { $set: { energy: { $cond: { if: { $gt: [ { $add: [ "$energy", 20 ] }, 100 ] }, then: ...

How to identify jquery document readiness in Android Webview

When converting a website to an Android app using an Android Webview, I encountered an issue with JavaScript files. The website contains multiple JavaScript files that start with $(document).ready(). While the website functions properly, the Android app ...

Parsing JSON using Volley

Our services include: { software: [ "Website Design", "E-Commerce", "Logo Design & Corporate Identity", "Web Hosting & Domain", "Desktop and Mobile Applications" ], networking: [ "Network Sales & Technical Service", "Server Sales & Techni ...

Providing settings to Vue.js components that have been globally registered

When registering my Vue.js components, I follow this pattern: In the index.js file of a separate reusable npm and webpack project called myComponents: import MyButtons from './src/components/my-buttons.vue' import MyInput from './src/compo ...

Persistent NW.js Local Storage Cache Remains Present even After Deleting Application

I have been encountering an issue in my NW.js app where I store data in the Local Storage. Even after deleting the app and cleaning up cache information, the Local Storage data seems to persist. When I reinstall the app, the stored data reappears as if it ...

The Onchange Ajax function successfully retrieves data from the database, but I am unsure how to dynamically update the value of a textarea based on the value

Recently, I've been experimenting with using Ajax calls to fetch values from a database and display them in a text-area. My current challenge is updating the text-area values based on the input in another text-box, which needs to be multiplied by the ...

Dynamically loading inter-component JS/TS in an Angular application

Hey there! I have a current component structure set up like this: appComponent --infoComponent ---beforeComponent ---afterComponent Both the before and after components have navbars with unique IDs, specifically navbar_before and navbar_after. H ...

Is there a way to retrieve the length from a state observer variable?

Currently, I am in the process of learning NgRx and I have encountered a situation where I need to replace this template code: <ion-button *ngIf="myVar.length > 0" ... > I want to use a code that retrieves the value from a state observ ...

What is the correlation between statistics and posts that are generated dynamically?

One interesting aspect to consider is how statistics are connected to individual posts. For instance, linking the like count to each Facebook post or tying upvote and downvote stats to a question on Stackoverflow presents some intriguing challenges. How ...

I wish to input a continuous flow of information from a JavaScript file into an HTML text box

Being an absolute beginner in the coding world, I recently attempted to create an app for a Tizen device (Samsung Gear S) that could read and display heart rate data. Initially, I utilized templates and tried writing data to the filesystem but faced some c ...

How can I transfer data from my iPhone to my computer?

Currently, I have successfully built an iPhone app using PhoneGap and AngularJS that scans and processes barcodes exactly how I want. However, I also have a webapp powered by AngularJS that requires barcode input and similar processing capabilities. Since ...