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.

You are returning res.sel['field_id']. But, I don't see 'sel' in your console log. — Eranki
– Eranki, Commented Dec 21, 2020 at 6:57

Rudraprasad Das · Accepted Answer · 2020-12-21 07:28:21Z

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

edited Dec 21, 2020 at 7:28

answered Dec 21, 2020 at 5:22

Rudraprasad Das

3782 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Jumar Juaton Over a year ago

Yes, that's what I'm trying to do. Appreciate your help. However, I'm sorry, I tried your code and got this response. i.ibb.co/C1T4qqF/2020-12-21-12-57.png

Jumar Juaton Over a year ago

Futher, I'm trying to make it like id: res.client_id, 'text': res.company_name. Is it possible to something like concat an object property from select2El.params object?

Rudraprasad Das Over a year ago

I think the problem is occurring because var is used which doesn't form block-level closure. I have edited the answer, can you check it?

Rudraprasad Das Over a year ago

Also, you can use Object.assign to merge objects. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Jumar Juaton Over a year ago

Thank you @rudraprasad! Greatly appreciated. By the way, just another quick question. Why is that I encounter an id not defined error? i.ibb.co/n7S6DbV/2020-12-21-20-16.png

|

Collectives™ on Stack Overflow

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

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related