从庞大的阵列中获取数据

Question

So first things first, Here is my code for an array (explanation afterwards):

 var UserProfiles = [{ userProfileID: 1, firstName: 'Austin', lastName: 'Hunter', email: 'test', token: '', platform: 'android', password: 'incorrect', companyProfileID: 1, UserTopics: [{ topicID: 1, topicName: 'Needs Maintenance', alertLevel: 'Urgent', TopicDepartments: [{ departmentID: 1, departmentName: 'Shop', required: true, DepartmentUsers: [{ userProfileID: 1, firstName: 'Austin', lastName: 'Hunter', email: 'test', token: '', platform: 'android', companyProfileID: 1 }] }] }] }]; 

So what is UserProfiles? It is an array that will hold many user profiles. Each profile will have multiple UserTopics, and each UserTopics will have multiple TopicDepartments. So an array with an array with an array.... Mind blowing. How will it be populated? Well it will be populated using a ionic registration app that will post to a server and insert into this array. But that is not my issue. What is my issue? So what I have in my app is the code of what I posted. I have a single profile, lets say UserProfiles[0]. I need to get the UserTopics topicName out, at every index. But I am not sure on how to get each one out and put it into a dropdown menu in my app.

I have a

 <select ng-model="selectSubject" ng-change="changedValue(selectSubject)" data-ng-options="option.subject for option in subject"> <option value="" disabled>Select a Subject</option> </select> 

That gets the user profile from storage and needs to get all of the UserTopics.topicName's associated.

I know I did a horrible job at explaining my issue. But I could really use some help, work with me and I can help explain.

Answer 1

The html is:

<select id="topic_name"></select>

Now the JS is as follow:

for(var i=0;i<UserProfiles.length;i++)
{
   var profile=UserProfiles[i];         //getting a profile

   var topic=profile.UserTopics;        //getting UserTopics array

   for(var j=0;j<topic.length;j++)
   {
      var topicname=topic[j].topicName;    //getting each topic name

      var topicdept=topic[j].TopicDepartments   //getting array of topic departments

       //now if you want more depth in topicdept array go on in same way

       html=html+"<option>"+topicname+"</option>";    //generating the dropdown list for topicname
   } 
}

$("#topic_name").html(html);

Answer 2

The method you are looking for is .map() if you are extracting data from objects in an array, or .forEach() if you are iterating over objects in an array and pushing them someplace else. Both take a function as an argument. You can alias each profile and then extract whatever data you'd like from it. Specifically:

var topics = [];

UserProfiles.forEach(function(profile){
    profile.UserTopics.forEach(function(topic) {
        topics.push(topic.topicName);
    });
});

Good luck!

Edit: Refactored so that all topics in the array will be added.

Answer 3

How about trying:

<select ng-model="selectedTopic" 
        ng-options="userTopic as userTopic.topicName for userTopic in selectedUser.UserTopics track by userTopic.topicId">
</select>

This follows " select as label for value in array ".

What it meant is that the ngModel will be assigned as the select expression, the select options will be displayed as the label expression.

Answer 4

Hope this snippet will be useful. Avoid using nested json object. As it will require nested loops

UserProfiles.forEach(function(item, index) {
  var getUserTopics = item.UserTopics;
  getUserTopics.forEach(function(userTopicItem, userTopicIndex){
    var getTopicName = userTopicItem.topicName;
    document.write('<pre>' + item.firstName + "--" + getTopicName + '</pre>')
  })
})

JSFIDDLE