I am attempting to display the values of a specific JSON in the correct order. Here is how my JSON is structured :
{
"A":[{"id":"21","name":"Andrea"},{"id":"22","name":"Apple"}],
"B":[{"id":"21","name":"Baby"},{"id":"22","name":"Bali"}],
"C":[{"id":"21","name":"Candle"},{"id":"22","name":"Canada"}],
}
How can I display these values using ng-repeat :
<div ng-repeat="item in items">
</div>
For example:
A
Andrea
Apple
B
Baby
Bali
C
Candle
Canada
For a live demonstration, please refer to this example: http://example.com/live-demo
Code snippet
<div ng-repeat="(index, value) in data">
{{index}}
<div ng-repeat="item in value">
{{item.title}}
</div>
</div>
To loop through the object, you can use the following code:
<div ng-repeat="(k, val) in myData">
{{k}}
<div ng-repeat="item in val">
<div>{{item.title}}</div>
</div>
</div>
Update: I noticed others have included a jsfiddle link as well so make sure to check it out :)
If you have data that looks like this :
$scope.items={
"A":[{"id":"21","name":"Andrea"},{"id":"22","name":"Apple"}],
"B":[{"id":"21","name":"Baby"},{"id":"22","name":"Bali"}],
"C":[{"id":"21","name":"Candle"},{"id":"22","name":"Canada"}],
}
Imagine each item as a map and iterate through for (key,value) pairs in the map where the value is an associated list. Then, iterate through each list of values as follows:
<div ng-repeat="(key,value) in items">
{{key}}
<div ng-repeat="item in value">
{{item.name}}
</div>
</div>
Take a look at this example.
Remember to include the key in your ng-repeat loop if you want to access both the key and value of your JSON data.
Here is the code snippet:
<div ng-repeat="(key,value) in data">
{{key}}
<div ng-repeat="item in value">
{{item}}
</div>
</div>
Currently, I am immersed in a 360-panorama project, utilizing panolens.js and three.js. While Panolens offers fullscreen mode functionality, the problem arises when entering this mode as the canvas conceals all of my div elements. One particular div elemen ...
Just a quick question. I have a JS function that takes a parameter as input. If the passed value happens to be NULL, I want to handle it accordingly. However, my limited experience with JS is making it difficult for me to use the correct syntax. Here' ...
I have encountered a problem while developing an app in React-Native that connects with the Hubspot API. Initially, I tried to make the request using the Node JS request module, but it didn't work well with React Native when Expo was involved. Now, I ...
I have implemented a dynamic list display using HTML radio buttons. Here is the code snippet: <html> <head> <script src="angular-v1.5.5.js"></script> </head> <body> <div ng-app="myApp" ng-controller=" ...
Currently, I am utilizing the following code snippet to extract an ID from the hash URL: var integer = window.location.hash.match(/\d+/) | 0; alert(integer); However, I have encountered an issue where upon using the back button after modifying the U ...
I need assistance with two of my modules: var client = require('./handlers/client.js'); var server = require('./handlers/server.js'); server.createClient() The client module: var client = function(){ console.log("New client"); ...
Just starting with nuxt js and running into issues when trying to add npm packages. Below are my attempts. star-raing.js import Vue from 'vue' import StarsRatings from 'vue-star-rating' Vue.use(StarsRatings) nuxt.config.js plugi ...
I've put in a lot of effort but haven't found a solution that works well for me. I attempted using promise.all and setting the array globally, but it didn't work out. My goal is to search through three MongoDB collections, match the finds, ...
I am interested in converting my current react native application to use typescript. The instructions mention uninstalling existing dependencies and adding new ones, like so: yarn add --dev @types/jest @types/react @types/react-native @types/react-test- ...
My array consists of various objects: [{id: 1, name: 'Apple', category: 'Fruit'} {id: 2, name: 'Melon', category: 'Fruit'} {id: 3, name: 'iPhone', category: 'Phone'} {id: 4, name: 'Samsung Ga ...
After implementing the following code: var manager = new THREE.LoadingManager(); manager.onProgress = function ( item, loaded, total ) { console.log( item, loaded, total ); }; var texture = new THREE.Texture(); var loader = new THREE.ImageLoader( ...
Trying to utilize jQuery for a quick function that calculates the pixel width of a string on an HTML page and then shortens the string until it reaches a desired pixel width... Unfortunately, I'm encountering issues with this process as the text is n ...
I am looking to convert my model into json format, specifically dealing with a byte[] array that needs to be converted to a base64 string during the process. I do not want the byte[] array converted to a normal string. This is the code snippet I have expe ...
In my Angular project, I have been utilizing the $watch function even though it's recommended to avoid doing so. Below is an example of how I've implemented it: $scope.$watch('mysevice.function()', function(tilda) { $scope.valu ...
While exploring options for inserting arrays into single database columns, I came across an article that discussed inserting JSON strings. Unfortunately, the article did not provide detailed instructions on how to do this. Despite conducting further resear ...
Currently, I am delving into the world of React and attempting to create a simple TODO list using Material-UI. However, I have encountered an issue with handling IconMenu menu actions within a listItem element. I am struggling with triggering the deleteI ...
My filter relies on the result of the service.show() function: angular.module('util') .filter('formatMoney', ['accounting', 'service', function (accounting, service) { return function (number) { ...
I have a directive that I'm using for my navigation, but when both ng-clicks are triggered, they fire twice. I've looked at similar questions here, but can't seem to figure it out. Any help would be appreciated. The HTML element <nav ng ...
I am attempting to extract data from . The tasks I want to accomplish are as follows: - Choose "Dentist" from the dropdown menu at the top of the page - Click on the search button - Observe that the information at the bottom of the page changes dynamica ...
I've removed the .lock file and node_modules, then reinstalled, but it's still not working. Can someone assist me with fixing this? npm ERR! gyp ERR! node -v v16.13.0 npm ERR! gyp ERR! node-gyp -v v8.2.0 npm ERR! gyp ERR! not ok npm ERR! node-pr ...