How can you reuse an object property in a loop in javascript?

Question

I was trying to reuse an object property in a loop. Is this the right way? I'm always getting an undefined error. The properties I want to use are 'field_id' and 'field_text'. I'm not sure if it should be defined as a variable or a string.

Below is my full code:

var client_id = '', company_name = '', vacancy_category_id = '', category_name = '', user_id = '', full_name = '';
    let select2El = {
        params: [{
            'id': '#client_id', 
            'url': '/consultant/vacancy/get-clients', 
            'field_id': client_id, 
            'field_text': company_name, 
            'success_response': $scope.clients
        }, {
            'id': '#clone_client_id', 
            'url': '/consultant/vacancy/get-clients', 
            'field_id': client_id, 
            'field_text': company_name,
            'success_response': $scope.clients
        }, {
            'id': '#category_id', 
            'url': '/consultant/vacancy/get-categories', 
            'field_id': vacancy_category_id, 
            'field_text': category_name, 
            'success_response': $scope.categories
        }, {
            'id': '#owner_id', 
            'url': '/consultant/vacancy/get-users-by-type', 
            'field_id': user_id, 
            'field_text': full_name, 
            'success_response': $scope.users
        }]
    }

    for (var key in select2El.params) {
        var sel = select2El.params[key];
        angular.element(sel['id']).select2({
            width: '100%',
            placeholder: '--Select--',
            ajax: {
                url: sel['url'],
                dataType: 'json',
                data: function (params) {
                    return {
                        search: params.term,
                        page: params.page || 1
                    }
                },
                processResults: function (response, params) {
                    params.page = params.page || 1;
                    return {      
                        results: response.data.map(function (res) {
                            console.log(res);
                            return { id: res.sel['field_id'], 'text': res.sel['field_text'] }
                        }),
                        pagination: {
                            more: (params.page * 10) < response.total
                        }
                    };
                },
                success: function (response) {
                    sel['success_response'] = response.data;
                }
            }
        });
    }

The line where the object property has been looped over is this:

return { id: res.sel['field_id'], 'text': res.sel['field_text']

When I console.log(res), I get this data.

Answer 1

This is happening because your res.sel field is undefined. From what I understand you want the value field_id and field_text from the object stored in select2El.params.

Try the following code -

var client_id = '', company_name = '', vacancy_category_id = '', category_name = '', user_id = '', full_name = '';
    let select2El = {
        params: [{
            'id': '#client_id', 
            'url': '/consultant/vacancy/get-clients', 
            'field_id': client_id, 
            'field_text': company_name, 
            'success_response': $scope.clients
        }, {
            'id': '#clone_client_id', 
            'url': '/consultant/vacancy/get-clients', 
            'field_id': client_id, 
            'field_text': company_name,
            'success_response': $scope.clients
        }, {
            'id': '#category_id', 
            'url': '/consultant/vacancy/get-categories', 
            'field_id': vacancy_category_id, 
            'field_text': category_name, 
            'success_response': $scope.categories
        }, {
            'id': '#owner_id', 
            'url': '/consultant/vacancy/get-users-by-type', 
            'field_id': user_id, 
            'field_text': full_name, 
            'success_response': $scope.users
        }]
    }

    for (let key in select2El.params) {
        let sel = select2El.params[key];
        angular.element(sel['id']).select2({
            width: '100%',
            placeholder: '--Select--',
            ajax: {
                url: sel['url'],
                dataType: 'json',
                data: function (params) {
                    return {
                        search: params.term,
                        page: params.page || 1
                    }
                },
                processResults: function (response, params) {
                    params.page = params.page || 1;
                    return {      
                        results: response.data.map(function (res, index) {
                            console.log(res);
                            return { id: sel['field_id'], 'text': sel['field_text'] }
                        }),
                        pagination: {
                            more: (params.page * 10) < response.total
                        }
                    };
                },
                success: function (response) {
                    sel['success_response'] = response.data;
                }
            }
        });
    }

I used index inside .map to fetch the values of field_text and field_id from the original object