Look through an array to find a particular string and send the result back to an AngularJS view

Question

Look through an array to find a particular string and send the result back to an AngularJS view

Currently, I am faced with the task of searching through a JSON output in my code to locate a specific string (for instance 'name_col_lbl') and then extracting its corresponding value ('Name' in this example) for AngularJS to display in the view.

$scope.globalContent = [
    {"id":"1","module":"student_reg","item":"name_col_lbl","value":"Name"},
    {"id":"2","module":"student_reg","item":"bday_col_lbl","value":"Birthdate"}
]
angular.forEach($scope.globalContent, function(el){
    $scope.nameLbl = el ***Here is where I'm struggling to extract the desired value***;
    $scope.bdayLbl= el ***This is another spot where I need to retrieve the expected value***;

});

Despite my efforts, I have not yet found an efficient solution for this dilemma. Your assistance is greatly appreciated!

javascript angularjs arrays json

Answer 1

Answer №1

Here's a solution you can try:

var $scopeglobalContent = [
    {"id":"1","module":"student_reg","item":"name_col_lbl","value":"Name"},
    {"id":"2","module":"student_reg","item":"bday_col_lbl","value":"Birthdate"}
];

for(var i = 0; i < $scopeglobalContent.length; i++){
for(key in $scopeglobalContent[i]){
  if($scopeglobalContent[i][key] == "name_col_lbl"){
    return console.log($scopeglobalContent[i].value);
    }
  }
}

This is fundamental knowledge. I recommend studying up on objects and loops to grasp how it operates and how to apply it effectively.

Answer 2

Here's a solution you can try:

var $scopeglobalContent = [
    {"id":"1","module":"student_reg","item":"name_col_lbl","value":"Name"},
    {"id":"2","module":"student_reg","item":"bday_col_lbl","value":"Birthdate"}
];

for(var i = 0; i < $scopeglobalContent.length; i++){
for(key in $scopeglobalContent[i]){
  if($scopeglobalContent[i][key] == "name_col_lbl"){
    return console.log($scopeglobalContent[i].value);
    }
  }
}

This is fundamental knowledge. I recommend studying up on objects and loops to grasp how it operates and how to apply it effectively.

Answer 3

Answer №2

Referencing a helpful Stack Overflow response, here is a method for searching through an array of objects:

var obj = array.filter(function ( obj ) {
    return obj.item === "name_col_lbl";
});

The variable obj will contain either the value associated with name_col_lbl or undefined if the key does not exist.

Your code implementation would resemble this:

function findObject(array, keyName) {
    var obj = array.filter(function ( obj ) {
        return obj.item === keyName;
    })[0];
    return obj;
}

$scope.globalContent = [
    {"id":"1","module":"student_reg","item":"name_col_lbl","value":"Name"},
    {"id":"2","module":"student_reg","item":"bday_col_lbl","value":"Birthdate"}
]
angular.forEach($scope.globalContent, function(el){
    $scope.nameLbl = findObject($scope.globalContent, "name_col_lbl")['value]' ***This is where I need to search for the string and return its value***;
    $scope.bdayLbl= findObject($scope.globalContent, "bday_col_lbl")['value]' ***This is where I need to search for the string and return its value***;
});

The findObject function sifts through the array by identifying the first object where obj.item matches the provided keyName. This matches the obj object that is then returned. In order to display only the desired value from the object rather than the entire object itself, the result of

findObject($scope.globalContent, "name_col_lbl")

has been appended with ['value'], which extracts the value corresponding to the value key to be shown in the Angular view.

Answer 4

Referencing a helpful Stack Overflow response, here is a method for searching through an array of objects:

var obj = array.filter(function ( obj ) {
    return obj.item === "name_col_lbl";
});

The variable obj will contain either the value associated with name_col_lbl or undefined if the key does not exist.

Your code implementation would resemble this:

function findObject(array, keyName) {
    var obj = array.filter(function ( obj ) {
        return obj.item === keyName;
    })[0];
    return obj;
}

$scope.globalContent = [
    {"id":"1","module":"student_reg","item":"name_col_lbl","value":"Name"},
    {"id":"2","module":"student_reg","item":"bday_col_lbl","value":"Birthdate"}
]
angular.forEach($scope.globalContent, function(el){
    $scope.nameLbl = findObject($scope.globalContent, "name_col_lbl")['value]' ***This is where I need to search for the string and return its value***;
    $scope.bdayLbl= findObject($scope.globalContent, "bday_col_lbl")['value]' ***This is where I need to search for the string and return its value***;
});

The findObject function sifts through the array by identifying the first object where obj.item matches the provided keyName. This matches the obj object that is then returned. In order to display only the desired value from the object rather than the entire object itself, the result of

findObject($scope.globalContent, "name_col_lbl")

has been appended with ['value'], which extracts the value corresponding to the value key to be shown in the Angular view.

Look through an array to find a particular string and send the result back to an AngularJS view

Answer №1

Answer №2

Similar questions

Assigning a Value to ngTypeahead in Reactive Model-Driven Form

Chrome not triggering the fullscreenchange event

Integrate React tags with Redux form to ensure the values are transmitted as an array within the payload

How to activate select only when specific options are chosen using jQuery

Progress bar for AJAX file loading for Flash player

If a user enters an incorrect path, the goal is to automatically redirect them to the homepage while displaying the correct URL in AngularJS

Angular1 Custom Filter is not triggering as expected

Maximizing Efficiency: Implementing Loading Panels in AngularJS

I encountered an issue with loading an array from session storage in Java Script

Increasing the top padding of a resized iframe thanks to iframe-resizer

Tips for creating a scrollable smiley input field

Avoid Conversion of HTML Entities in Table Cells

Tips for customizing the default configuration files in reactJs bootstrapping using npm

Is there a way to target a button within an anchor tag without relying on a specific id attribute?

Finding the difference between two NSDate instances

The AFNetworking AFHTTPClient does not support JSON operations with AFJSONRequestOperation

Condensing text saved in session storage

SignalR fails to trigger client callback function

jQuery AJAX issues on Safari and iOS gadgets

Filter an array using regular expressions in JavaScript