JS/Cypress.io: How to iterate over 2 corresponding sets of data

Question

JS/Cypress.io: How to iterate over 2 corresponding sets of data

This is what I have currently and it works, but I want to make it more DRY (do not repeat yourself):

Using Cypress.io:

var states1 = [
  "NE",
  "MO",
  "KS",
  "IA",
  "OK",
  "OR",
  "WA",
  "AZ",
  "NM",
  "NC",
  "SC",
  "GA",
  "FL"
];
cy.get('[data-popup-text="26% to 50% of People"]').within(() => {
  cy.wrap(states1).each(state => {
    cy.get(`[data-state="${state}"]`).trigger("mouseover", { force: true });
    cy.get(`[data-state="${state}"]`).click({ force: true });
    cy.get(`[data-state="${state}"]`).should("be.visible");
  });
});

var states2 = ["VT", "PA"];
cy.get('[data-popup-text="60% of People"]').within(() => {
  cy.wrap(states2).each(state => {
    cy.get(`[data-state="${state}"]`).trigger("mouseover");
    cy.get(`[data-state="${state}"]`).click();
    cy.get(`[data-state="${state}"]`).should("be.visible");
  });
});

var states3 = ["MD"];
cy.get('[data-popup-text="81% to 90% of People"]').within(() => {
  cy.wrap(states3).each(state => {
    cy.get(`[data-state="${state}"]`).trigger("mouseover", { force: true });
    cy.get(`[data-state="${state}"]`).click({ force: true });
    cy.get(`[data-state="${state}"]`).should("be.visible");
  });
});

As you can tell it's repeating a lot of code. I want to make it drier and started to try something like this but need some help and am not sure if this is the best way, it's not complete, and I was just trying to figure out how to do it, thus it's not working as intended.

I want to insert each corresponding value from the dataset accordingly and then run the assertions. So I need some sort of loop to work with this data set:

var items = [
  ["NE", "26% to 50% of People"],
  ["MO", "26% to 50% of People"],
  ["KS", "26% to 50% of People"],
  ["VT", "60% of People"],
  ["PA", "60% of People"],
  ["MD", "81% to 90% of People"]
];

cy.get(`[data-popup-text="${items[0][1]}"]`).within(() => {
  cy.wrap(items).each(item => {
    cy.get(`[data-state="${items[0][0]}"]`).trigger("mouseover", {
      force: true
    });
    cy.get(`[data-state="${items[0][0]}"]`).click({ force: true });
    cy.get(`[data-state="${items[0][0]}"]`).should("be.visible");
  });
});

Answer 1

I would go for key value pair arrays within a Map object, something like:

    const items = new Map([
        ['NE', "26% to 50% of People"],
        ['MO', "26% to 50% of People"],
        ['KS', "26% to 50% of People"],
        ['VT', "60% of People"],
        ['PA', "60% of People"],
        ['MD', "81% to 90% of People"]
    ]);

    for (const [key, value] of items.entries()) {
        it('check my items', () => {

            cy.get(`[data-popup-text="${value}"`).within(() => {
                cy.get(`[data-state="${key}`).trigger('mouseover', {force: true})
                cy.get(`[data-state="${key}`).click({force: true})
                cy.get(`[data-state="${key}`).should('be.visible')
            })
        })
    }

Answer 2

Ended up using this:

farooqs_data.json file:

{
 'NE': "26% to 50% of People",
 'MO': "26% to 50% of People",
 'KS': "26% to 50% of People",
 'VT': "60% of People",
 'PA': "60% of People",
 'MD': "81% to 90% of People",
}

Test code:

    const state_data = require('/path/to/my/json/data/file/farooqs_data.json');

        Object.keys(state_data).forEach(function(key) {
        cy.get(`[data-popup-text="${state_data[key]}"]`).within(() => 
        {
            cy.get(`[data-state="${key}"]`).trigger('mouseover' {force: true})                                               
            cy.get(`[data-state="${key}"]`).click({force: true})                
            cy.get(`[data-state="${key}"]`).should('be.visible')
            })
        })