JavaScript: Streamlining the Selection of Objects in an Array

Question

JavaScript: Streamlining the Selection of Objects in an Array

I'm completely new to JavaScript, and I've hit a roadblock with a task. I'm hoping someone can help guide me through it.

The challenge I am facing involves working with an Array of Objects structured like this:

var labels = [
            // labels for page 1
            {pageID:1, labels: [
                {labelID:0, content:[{lang:'eng', text:'Txt1 Eng'}, {lang:'de', text:'Txt1 De:'}]},
                {labelID:1, content:[{lang:'eng', text:'Txt 2 Eng:'}, {lang:'de', text:'Txt2 De:'}]},
                {labelID:2, content:[{lang:'eng', text:'Txt 3 Eng:'},{lang:'de', text:'Txt 3 De:'}]}
            ]},

            // labels for page 2
            {pageID:2, labels: [
                {labelID:0, content:[{lang:'eng', text:'Txt1 Eng'}, {lang:'de', text:'Txt1 De:'}]},
                {labelID:1, content:[{lang:'eng', text:'Txt 2 Eng:'}, {lang:'de', text:'Txt2 De:'}]},
                {labelID:2, content:[{lang:'eng', text:'Txt 3 Eng:'},{lang:'de', text:'Txt 3 De:'}]}
            ]}
    ]

My objective is to create a function that will return an array of labels (Objects) for a specific page and language. By calling this function with pageID as 1 and lang as eng, I want to generate an array like the following:

var desiredArray = [
    {labelID:0, text:'Txt1 Eng'}, 
    {labelID:1, text:'Txt1 Eng'}, 
    {labelID:2, text:'Txt2 Eng'}
]

Currently, I am working on writing the function to retrieve/build the new array:

this.getLabelsForPageAndLang = function (numPage, lang) {
            // This section filters the main object and selects the object with pageID == numPage
        var result = labels.filter(function( obj ) {
            return obj.pageID == numPage;
        });

        var tempResult = result[0].labels;
        var desiredResults = [];  // Here I aim to store the new objects
        for (var i=0; i<tempResult.length; i++) {
            var simpleLabelObject = {};
            simpleLabelObject.labelID = tempResult[i].labelID;
            // simpleLabelObject.text = ?????

            results[i] = simpleLabelObject;
        }

        console.log (results);

    };

...But how do I access the correct value (corresponding to the selected language) in the content property?

javascript arrays object

Answer 1

Answer №1

To keep the matching page, you can utilize the filter method in a similar manner as shown below.

this.findLabelsForPageAndLanguage = function (pageNumber, language) {
        // This section filters the main object and selects the object with pageID equal to pageNumber
    var filteredResult = labels.filter(function(obj) {
        return obj.pageID === pageNumber;
    });
    
    var contentFilter = function(obj){ return obj.lang === language};

    var tempResults = filteredResult[0].labels;
    var desiredLabels = [];  // Store new objects here
    for (var i=0; i<tempResults.length; i++) {
        var labelObject = {};
        labelObject.labelID = tempResults[i].labelID;
        var matchContent = tempResults[i].content.filter(contentFilter);
        labelObject.text = matchContent[0].text;

        desiredLabels[i] = labelObject;
    }

    console.log(desiredLabels);

};

No boundary checks were implemented assuming there is always a matching element in your code, but it may be advisable to include them.

If you wish to avoid creating two closures each time the function is called, you can prototype an object like so:

var LabelFilter = function(pageNumber, language) {
    this.pageNumber = pageNumber;
    this.language = language;
};

LabelFilter.prototype.filterByPage = function(obj) {
    return obj.pageID === this.pageNumber;
}

LabelFilter.prototype.filterByLanguage = function(obj) {
    return obj.lang === this.language;
}

LabelFilter.prototype.filterLabels = function(allLabels) {
    var result = allLabels.filter(this.filterByPage, this);

    var tempResults = result[0].labels;
    var desiredLabels = [];
    for (var i=0; i<tempResults.length; i++) {
        var labelObject = {};
        labelObject.labelID = tempResults[i].labelID;
        var matchedContent = tempResults[i].content.filter(this.filterByLanguage, this);
        labelObject.text = matchedContent[0].text;

        desiredLabels[i] = labelObject;
    }

    return desiredLabels;
}

console.log(new LabelFilter(1, "eng").filterLabels(labels));

Answer 2

To keep the matching page, you can utilize the filter method in a similar manner as shown below.

this.findLabelsForPageAndLanguage = function (pageNumber, language) {
        // This section filters the main object and selects the object with pageID equal to pageNumber
    var filteredResult = labels.filter(function(obj) {
        return obj.pageID === pageNumber;
    });
    
    var contentFilter = function(obj){ return obj.lang === language};

    var tempResults = filteredResult[0].labels;
    var desiredLabels = [];  // Store new objects here
    for (var i=0; i<tempResults.length; i++) {
        var labelObject = {};
        labelObject.labelID = tempResults[i].labelID;
        var matchContent = tempResults[i].content.filter(contentFilter);
        labelObject.text = matchContent[0].text;

        desiredLabels[i] = labelObject;
    }

    console.log(desiredLabels);

};

No boundary checks were implemented assuming there is always a matching element in your code, but it may be advisable to include them.

If you wish to avoid creating two closures each time the function is called, you can prototype an object like so:

var LabelFilter = function(pageNumber, language) {
    this.pageNumber = pageNumber;
    this.language = language;
};

LabelFilter.prototype.filterByPage = function(obj) {
    return obj.pageID === this.pageNumber;
}

LabelFilter.prototype.filterByLanguage = function(obj) {
    return obj.lang === this.language;
}

LabelFilter.prototype.filterLabels = function(allLabels) {
    var result = allLabels.filter(this.filterByPage, this);

    var tempResults = result[0].labels;
    var desiredLabels = [];
    for (var i=0; i<tempResults.length; i++) {
        var labelObject = {};
        labelObject.labelID = tempResults[i].labelID;
        var matchedContent = tempResults[i].content.filter(this.filterByLanguage, this);
        labelObject.text = matchedContent[0].text;

        desiredLabels[i] = labelObject;
    }

    return desiredLabels;
}

console.log(new LabelFilter(1, "eng").filterLabels(labels));

Answer 3

Answer №2

Let's filter once more:

const extractLabels = (pageNumber, language) => {
    // This function filters the main object to select the object with pageID equal to pageNumber
    const result = labels.filter(obj => obj.pageID === pageNumber);
    const tempResults = result[0].labels;
    const desiredResults = []; // New objects will be stored here
    for (let i = 0; i < tempResults.length; i++) {
        let simpleLabelObj = {};
        simpleLabelObj.labelID = tempResults[i].labelID;
        const lg = tempResults[i].content.filter(lg => lg.lang === language);
        simpleLabelObj.text = lg[0].text;

        desiredResults.push(simpleLabelObj);
    }

    console.log(desiredResults);

};

http://jsfiddle.net/4r7tE/

Answer 4

Let's filter once more:

const extractLabels = (pageNumber, language) => {
    // This function filters the main object to select the object with pageID equal to pageNumber
    const result = labels.filter(obj => obj.pageID === pageNumber);
    const tempResults = result[0].labels;
    const desiredResults = []; // New objects will be stored here
    for (let i = 0; i < tempResults.length; i++) {
        let simpleLabelObj = {};
        simpleLabelObj.labelID = tempResults[i].labelID;
        const lg = tempResults[i].content.filter(lg => lg.lang === language);
        simpleLabelObj.text = lg[0].text;

        desiredResults.push(simpleLabelObj);
    }

    console.log(desiredResults);

};

http://jsfiddle.net/4r7tE/

Answer 5

Answer №3

An example of a 'secure' method to handle situations where pages share the same pageID and have multiple contents in the same lang:

this.retrieveLabelsForPageAndLang = function(pageNumber, language) {
    var output = [];
    var matchedPages = labels.filter(function(item) {
        return item.pageID === pageNumber;
    });
    for (var p = matchedPages.length - 1; p >= 0; p--) {
        var currentPage = matchedPages[p];
        for(var i = currentPage.labels.length - 1; i >= 0; i--) {
            var labelIdentifier = currentPage.labels[i].labelID;
            for (var j = currentPage.labels[i].content.length - 1; j >= 0; j--){
                if (currentPage.labels[i].content[j].lang === language) {
                    output.push({labelID: labelIdentifier, contentText: currentPage.labels[i].content[j].text});
                }
            }
        }
    }    
    console.log(output);
}

Code Sample: http://jsfiddle.net/6VQUm/

Answer 6

An example of a 'secure' method to handle situations where pages share the same pageID and have multiple contents in the same lang:

this.retrieveLabelsForPageAndLang = function(pageNumber, language) {
    var output = [];
    var matchedPages = labels.filter(function(item) {
        return item.pageID === pageNumber;
    });
    for (var p = matchedPages.length - 1; p >= 0; p--) {
        var currentPage = matchedPages[p];
        for(var i = currentPage.labels.length - 1; i >= 0; i--) {
            var labelIdentifier = currentPage.labels[i].labelID;
            for (var j = currentPage.labels[i].content.length - 1; j >= 0; j--){
                if (currentPage.labels[i].content[j].lang === language) {
                    output.push({labelID: labelIdentifier, contentText: currentPage.labels[i].content[j].text});
                }
            }
        }
    }    
    console.log(output);
}

Code Sample: http://jsfiddle.net/6VQUm/

JavaScript: Streamlining the Selection of Objects in an Array

Answer №1

Answer №2

Answer №3

Similar questions

Avoid adding any empty entries to the list using jQuery

Exploring mysterious traits through inheritance

"Encountering an issue with Next.js where the Redux

What is the correct way to utilize the karma-ng-html2js-preprocessor?

I'm curious as to why a webpage tends to load more quickly when CSS files are loaded before script files. Can anyone shed some

Error: Uncaught TypeError - Unable to assign a value to the 'status' property

Is there a way for me to fetch the post variables sent through $http.post in Angular within my Node.js backend?

What is the proper way to invoke a method within the same class, Class A?

Mastering the Art of Destructuring within React Components

Tips for transferring data from an HTML textbox to a JavaScript variable

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

Successfully converted Javascript variables to PHP variables, however, I faced difficulties when attempting to compare the PHP variable

Utilize the Bootstrap column push-pull feature on the mobile version of

Troubleshooting Problems with Fancybox Scaling on Small Landscape-Oriented Mobile Devices

Having trouble getting the onClick event to trigger in ReactJS buttons

Having trouble with document.getElementById.innerHTML not displaying the correct content?

Algorithm for Generating Cubes

Is there a potential security flaw in jQuery when using $.get(code_url) to execute the returned code without relying on eval() or appending it to the DOM

Experiencing difficulty decoding JSON output on jquarymobile's HTML page when making an Ajax request

Interactive JQuery calendar