What is the best way to iterate over an object with property names like this?
$scope.myobjects = [
{
'property1': {
id: 0,
name: 'someone'
}
},
{
'property2': {
id: 1,
name: 'someone else'
}
}];
What is the best way to iterate over an object with property names like this?
$scope.myobjects = [
{
'property1': {
id: 0,
name: 'someone'
}
},
{
'property2': {
id: 1,
name: 'someone else'
}
}];
Since the keys of the object are not the same, a simple iteration won't work. Here's an alternative approach you can take:
<div ng-repeat="object in myobjects">{{getValue(object,'id') }}
{{getValue(object,'name')}}
</div>
In your controller:
$scope.getValue = function(value,field) {
var key = Object.keys(value).filter(function(val)
{
return val != "$$hashKey"
})[0];
return value[key][field];
}
To extract property names of objects (the second loop goes through the objects), you need to include a nested ng-repeat like the one below:
<div ng-repeat="(index, object) in myobjects">
<div ng-repeat="(key, value) in object">
<strong>key: </strong> {{ key }}, <strong>value: </strong>{{ value }}
<strong>value.id: </strong> {{ value.id }}, <strong>value.name: </strong>{{ value.name }}
</div>
</div>
This will display:
key: property1, value: {"id":0,"name":"somebody"} value.id: 0, value.name: somebody
key: property2, value: {"id":1,"name":"someguy"} value.id: 1, value.name: someguy
Check out the demo here: http://embed.plnkr.co/SIMjaXMZPzbHLOCYRU8T/preview
Using ng-repeat with object properties
<div ng-app="demo" ng-controller="abc">
<div ng-repeat="(key, value) in myobjects">
<div ng-repeat="objProp in value">{{objProp.name}}</div>
</div>
</div>
var app = angular.module('demo', []);
app.controller('abc', function ($scope) {
$scope.myobjects = [{
'property1': {
id: 0,
name: 'somebody'
}
}, {
'property2': {
id: 1,
name: 'someguy'
}
}];
})
Check out the working jsfiddle for reference.
I'm encountering an NVD3 tooltip issue with my multichart (multiline chart). The XAxis labels are set as JAN, FEB, MAR... DEC. However, when I hover over the graph, it displays 0, 1, 2, 3... 11 as the tooltip title instead of the month names. Here is ...
I am facing an issue with populating two datatables using data retrieved from a flask API through a GET request. My data source URL is localhost:5000/data, but for some reason, I am unable to display the data in the datatables. Interestingly, when I use a ...
I am currently working on a web application where the client receives data from a server. The challenge I'm facing is how to pass this data from NodeJS to a Javascript file that is included in an HTML document. Unfortunately, I have not been successfu ...
In a project I am working on, I have implemented complex AJAX functionality to fetch inner page content from a WordPress blog. Due to the dynamic nature of the site, where the DOM is replaced after page load via AJAX, I have opted to use jQuery's .liv ...
I am attempting to reproduce the functionality demonstrated in this example When dealing with a large table, I want it to resize to display 10 entries and paginate them accordingly. The only thing I require is the pagination feature without the search bar ...
In my React application, I am facing an issue with a transparent div that serves as a dropzone for draggable elements. This div covers text and also contains children elements that may have their own text content. <Dropzone> <SomeChild> . ...
I am currently developing my portfolio by working on a variety of small projects, with my current focus on web scraping. Using Puppeteer, I have successfully scraped basic test websites. However, my goal now is to tackle more advanced challenges, such as ...
Check out the JSfiddle link here for the full code. I'm having trouble with my slider as the last picture keeps collapsing underneath and is not hidden as it should be. I suspect this issue is causing the slider to malfunction. HTML <div class=" ...
Looking to create a unique textbook design that starts out with specific width and height dimensions, but expands downward as users type beyond the initial space. Wondering if CSS can help achieve this functionality? In a standard textbox, only a scroll ba ...
Is it a secure way to connect to Mongo DB by using Node JS, Mongo DB, and Express? Could someone provide an explanation of this code in terms of security? === Many tutorials often only show... var mongoClient = new MongoClient(new Server('localhos ...
As a novice delving into a project in the MEAN stack, I'm encountering inconsistent HTML previews. When I view it independently versus running it from the project, the display varies. Here's the intended appearance (in standalone preview): imgu ...
Currently, I am integrating the Google Maps API v3 for JavaScript into my project. However, I am facing an issue where the map only appears in the upper left corner under certain circumstances. To visualize this problem, you can visit this link and click ...
I encountered an issue when trying to update my component based on a state change. When I update the state outside of an HTTP call, the component updates correctly. However, when I try to do the same inside an HTTP get call, the state is updated but the ...
I have a situation where I am working with two arrays of objects. arr1 = [{ name: "John" }, { name: "Frank" }]; arr2 = [ { name: "John", age: 35 }, { name: "Frank", age: 22 }, { name: "Kate", age: 23 ...
Can I centralize a translation function for all table header elements? const CustomersTable = () => { var headers=<> <th>Name</th> <th>Age</th> <th>Another text</th> </> ...
While working on my Vue Js project, I encountered an issue with displaying data from an API in JSON format. Despite using this.obj =JSON.stringify(this.Flats); and successfully seeing all the data using console.log, I struggled to loop over and view the pa ...
This question may seem a bit confusing, so allow me to explain further. I am trying to execute a jquery script that is written in a text file obtained through an ajax request. For example, the code I receive from the ajax request looks like this: ($($(" ...
Our document searching functionality utilizes mark.js to highlight text and navigate to the results. You can see an example of this in action here. If you search for "Lorem ipsum" -> the highlighting works perfectly, but the navigation jumps to fragmen ...
I'm a bit perplexed at the moment, as I'm attempting to send data to my Node.js server using the code snippet below: $.ajax({type:'POST', url:'/map', data:'type=line&geometry='+str, succe ...
This query was originally posted on this thread I am looking to implement a filter that will display the values of colors.name only if they also exist in cars.color $scope.colors = [{"name":"blue","count":2}, {"name":"red","count":12}, ...