Repeated instances in a loop are strictly prohibited

I am facing an issue with AngularJS where I am unable to display JSON data in my HTML. Below is the code I am using:


$('.loading').show();
$scope.posts=[];
$http.get("https://api.basebear.com/json/tables/20a3fb1d-42c7-45cb-9440-2c6d5d10403d/records?apikey=6e954b0a17b74f52b842ec2b0f0d6d0da24ac5ad").
success(function(data) {
$scope.posts=JSON.stringify(data);
console.log("ok" + "data"+  $scope.posts);
}).
error(function() {
$('.loading').hide();
console.log("no" );
alert("Si è verificato un errore!"); 
});
});

My HTML code is as follows:


<ons-toolbar fixed-style>
<div class="left">
<ons-toolbar-button onclick="menu.toggleMenu()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Prova</div>
</ons-toolbar> 

<section style="padding: 10px;">

 <ons-row style="padding: 10px 0 20px 0;">
 <input type="search" placeholder="Search" class="search-input" ng-model="search">
 </ons-row>

 <table>
 <tr>
 <th>Id</th>
 <th>Nome</th>
 <th>Cognome</th>
 <th>Data</th>
 </tr>
 <tr ng-repeat="post in posts">
 <td>{{post.Value}}</td>
 <td>{{post.Value}}</td>
 <td>{{post.Value}}</td>
 <td>{{post.Value}}</td>
 </tr>
 </table>
 </section>
 

The error I encounter is: Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: post in posts, Duplicate key: string:[, Duplicate value: "[" How can I resolve this issue and display the data correctly?

Answer №1

Revise the code snippet from:

ng-repeat="post in posts"

to:

ng-repeat="post in posts track by $index"

UPDATE:

Upon reviewing your data, it appears to be an array of objects within an array. Transform it into a single array of objects.

Alternatively, if you're unable to access the API, modify:

$scope.posts = JSON.stringify(data) 

to:

$scope.posts = angular.toJson(data[0]) //I don't believe JSON.stringify is necessary.

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

Providing inputs to $resource

Imagine that we have the following code: angular.factory('Service', [ '$resource', function ($resource) { return $resource('/path/:id', {id: '@id'}); }]) If we use the following code in our controller: v ...

Having trouble escaping single quotes in JSON.stringify when using a replacer function

I'm attempting to replace single quotation marks in the values of my JSON string with \' however, it seems to not be working when I try to use the replacer function. var myObj = { test: "'p'" } var re ...

Guide on notifying the client when the database is updated, similar to the notification system used in Facebook chat

Is it possible to send an alert to the client using the website only when a specific field is updated? I understand how to periodically check for database updates with silent Ajax calls, but I am looking to trigger an Ajax call only when relevant informa ...

What is the best way to determine if a jQuery AJAX response contains HTML elements?

On my webpage, I have a single form that triggers an AJAX call which can result in two different responses. One of the responses only includes a status code. In order to display any HTML contents returned by the response object on my page, I need to exami ...

Promise-based React Redux Login: An error occurred during login process

I'm currently working on my first React+Redux application and I'm still in the scaffolding phase. As a newcomer to React, I've encountered an issue with my simple login app. The AuthAction returns a Promise from the login(username, password) ...

Why is the bearing attribute important in determining the location of an object?

I have started using this plugin to enable GPS functionality in my app. If you are interested, the link to the plugin can be found here: https://github.com/mauron85/cordova-plugin-background-geolocation My question is about the bearing property of the lo ...

hover over the picture with your cursor

Struggling with jquery and css, could use some assistance :) Check out my html code below: <html> <head> //myscripts <script> $(document).ready(function(){ $(".cover").hover(function(){ //the function i need to write } ...

AngularJS extension known as 'ngclipboard'

I've been attempting to utilize a plugin called ngclipboard in Angular, but something seems amiss as it's not functioning as expected. There are no error messages, however, the text from the input box is not being copied to the clipboard. To see ...

Organizing a Collection of Likes within an AngularJS Service

I have a like button on my profile page that, when clicked, should add the user's like to an array and store it in the database. Within my profile controller, I have the following code: $scope.likeProfile = UserService.likeProfile(loggedInUser,$stat ...

There seems to be an issue with posting JSON data correctly

Currently, I am attempting to include an object with numerous attributes within it. This is the object I am trying to use with $.post: ({"fname" : fname, "lname" : lname, "gender" : gender, "traits" : { "iq" : inte ...

Creating a custom Higher Order Component to seamlessly connect react-relay and react-router using TypeScript

Hey there! So, my Frankenstein monster project has decided to go rogue and I'm running out of hair to pull out. Any help would be greatly appreciated. I've been working on setting up a simple app with React, React-Router, React-Relay, and Typesc ...

Error Encountered: Module Not Located

I am encountering an error in my Project where it keeps showing 'Cannot find module' even after numerous attempts to install and uninstall packages simultaneously. The problem persists, and I can't seem to resolve it. { "name&quo ...

Tips for placing <div .right> above <div .left> when the window is small, given that <div .right> is positioned to the right of <div .left> when the window is large

I've come across a similar layout before, but I'm struggling to replicate it myself. The idea is to have text aligned on the left side with an image floated to the right. Instead of the image appearing below the text when the window size is red ...

When working with props.data in MDBNav, learn how to set the active TAB or LINK

Utilizing ReactJS, I am incorporating MDBNav from MDBreact. This snippet demonstrates the container where props.data is defined: import React from 'react' import MiTabs from "../componentes/MiTabs"; class VpnList extends React.Component { st ...

Unsuccessful execution of JavaScript in returned HTML after being appended with jQuery .load() or .ajax()

I have attempted to use .load() and $.ajax in order to retrieve some HTML that needs to be added to a specific container. However, the JavaScript enclosed within the fetched HTML is not executing when I add it to an element. When employing .load(): $(&ap ...

What is the best way to transfer JSON data to an HTML page using Node.js?

I am working on a code for developing a school website. I have successfully implemented password matching, but I am facing difficulties in redirecting users to the correct page once the passwords match. I want to display data from a JSON file and show the ...

The failure within the internal request resulted in the failure of the main request

I develop a Jquery Promise with the following structure: request1() .then(response => {}) .then( () => { request2().done(response => {}) } .fail(err => {}); In the done and fail blocks, I implement code to "unblock" the scre ...

Storing JSON array values as variables using the Linkedin PHP library

I am new to working with APIs and JSON and would really appreciate any assistance on the following. Currently, I am utilizing the PHP Linkedin Library for executing People Queries. Below is the relevant code snippet: <?php $OBJ_linkedin-&g ...

The popup is unable to remain in the center of the screen because the background page keeps scrolling back to the top

Whenever I click a button to open a popup window, the page unexpectedly scrolls to the top. It's frustrating because if I'm at the bottom of the page and press the 'submit' button, the popup doesn't display in the center as intende ...

Error message: "The term 'Outlet' is not recognized in react-router version 6.4"

What is the proper way to define the Outlet component in react-router version 6.4? Below is a code snippet: function Layout() { return ( <div> <Navbar /> <Outlet /> <Footer /> </div> ); } ...