Searching for the positions of nested array elements using their identifiers

Question

Searching for the positions of nested array elements using their identifiers

Looking for some assistance with a nested array of objects structured like this:

let pages = [
  [
    {
      leftCol: [
        { height: 34, id: 10 },
        { height: 18, id: 20 },
        { height: 45, id: 30 },
        { height: 59, id: 40 },
      ],
    },
    {
      rightCol: [
        { height: 34, id: 50 },
        { height: 34, id: 60 },
        { height: 34, id: 70 },
      ],
    },
  ],
  [
    {
      leftCol: [
        { height: 34, id: 80 },
        { height: 18, id: 90 },
        { height: 45, id: 100 },
        { height: 59, id: 110 },
      ],
    },
    {
      rightCol: [
        { height: 34, id: 120 },
        { height: 34, id: 130 },
        { height: 34, id: 140 },
      ],
    },
  ],
];

We need to create a method that can find the index of an element based on its id as well as find the index of the outer array. For instance:

findIdx(pages, 30) should return the index of the element (2) and the index of the outer array (0).

findIdx(pages, 110) should return the index of the element (3) and the index of the outer array (1).

The current method looks like this:

function getIdxAndPageNumOfColumn(array, columnIdx, payloadId) {
  let idx;
  let pageNum;

  for (pageNum = 0; pageNum < array.length; pageNum++) {
    let leftCol = array[pageNum][0].leftCol;
    let rightCol = array[pageNum][1].rightCol;
    let column = columnIdx === 0 ? leftCol : rightCol;
    idx = column.findIndex(item => item.id == payloadId);
    if (idx > -1) break;
  }

  return {
    idx: idx,
    pageNum: pageNum,
  };
}

However, this method requires specifying a columnIdx parameter which seems to be causing issues. Any suggestions on how to improve this would be greatly appreciated.

javascript arrays vue.js object multidimensional-array

Answer 1

Answer №1

To efficiently retrieve all the indexes of the desired object, consider implementing a dynamic approach.

function searchIndices(array, id) {
    function search(arr) {
        if (!arr) return;
        let inner,
            index = arr.findIndex(obj => {
                if (obj.id === id) return true;
                if (Array.isArray(obj)) return inner = search(obj);
                return inner = search(obj.leftCol || obj.rightCol);
            });
        return index !== -1 && [index, ...(inner || [])];
    }

    return search(array);
}

let pages = [[{ leftCol: [{ height: 34, id: 10 }, { height: 18, id: 20 }, { height: 45, id: 30 }, { height: 59, id: 40 }] }, { rightCol: [{ height: 34, id: 50 }, { height: 34, id: 60 }, { height: 34, id: 70 }] }], [{ leftCol: [{ height: 34, id: 80 }, { height: 18, id: 90 }, { height: 45, id: 100 },{ height: 59, id: 110 }] }, { rightCol: [{ height: 34, id: 120 }, { height: 34, id: 130 }, { height: 34, id: 140 }] }]];

console.log(searchIndices(pages, 30));  // [0, 0, 2]
console.log(searchIndices(pages, 110)); // [1, 0, 3]

Answer 2

To efficiently retrieve all the indexes of the desired object, consider implementing a dynamic approach.

function searchIndices(array, id) {
    function search(arr) {
        if (!arr) return;
        let inner,
            index = arr.findIndex(obj => {
                if (obj.id === id) return true;
                if (Array.isArray(obj)) return inner = search(obj);
                return inner = search(obj.leftCol || obj.rightCol);
            });
        return index !== -1 && [index, ...(inner || [])];
    }

    return search(array);
}

let pages = [[{ leftCol: [{ height: 34, id: 10 }, { height: 18, id: 20 }, { height: 45, id: 30 }, { height: 59, id: 40 }] }, { rightCol: [{ height: 34, id: 50 }, { height: 34, id: 60 }, { height: 34, id: 70 }] }], [{ leftCol: [{ height: 34, id: 80 }, { height: 18, id: 90 }, { height: 45, id: 100 },{ height: 59, id: 110 }] }, { rightCol: [{ height: 34, id: 120 }, { height: 34, id: 130 }, { height: 34, id: 140 }] }]];

console.log(searchIndices(pages, 30));  // [0, 0, 2]
console.log(searchIndices(pages, 110)); // [1, 0, 3]

Answer 3

Answer №2

Utilizing a reducer in your code can lead to more concise and readable solutions. However, the current implementation requires a static structure with specific references to leftCol and rightCol. To make it more versatile, consider replacing destructuring with an Object.entries() loop.

Directly accessing data from the page object

let pages = [/* Array of page objects with leftCol and rightCol arrays */];

function getIdxAndPageNumOfColumn(array, payloadId) {

  const pageAndIndex = array.reduce((acc, [{leftCol}, {rightCol}], i) => {
    if ((leftMatch = leftCol.findIndex(p => p.id === payloadId)) !== -1) {
      acc['idx'] = leftMatch;
      acc['pageNum'] = i;
      acc['colIdx'] = 0;
    } else if ((rightMatch = rightCol.findIndex(p => p.id === payloadId)) !== -1) {
      acc['idx'] = rightMatch;
      acc['pageNum'] = i;
      acc['colIdx'] = 1;
    }
    return acc
  }, {})
  
  return pageAndIndex;
}

console.log(getIdxAndPageNumOfColumn(pages, 30));
console.log(getIdxAndPageNumOfColumn(pages, 110));

Alternative approach using Object.values

let pages = [/* Array of page objects with leftCol and rightCol arrays */];

function getIdxAndPageNumOfColumn(array, payloadId) {

  const pageAndIndex = array.reduce((acc, pArr, pi) => {
    pArr.forEach((col, ci) => {
      Object.values(col).forEach(v => {
        if ((match = v.findIndex(p => p.id === payloadId)) !== -1) {
          acc['idx'] = match;
          acc['pageNum'] = pi;
          acc['colIdx'] = ci;
        }
      });
    });
    return acc
  }, {});
  
  return pageAndIndex;
}

console.log(getIdxAndPageNumOfColumn(pages, 30));
console.log(getIdxAndPageNumOfColumn(pages, 110));

Answer 4

Utilizing a reducer in your code can lead to more concise and readable solutions. However, the current implementation requires a static structure with specific references to leftCol and rightCol. To make it more versatile, consider replacing destructuring with an Object.entries() loop.

Directly accessing data from the page object

let pages = [/* Array of page objects with leftCol and rightCol arrays */];

function getIdxAndPageNumOfColumn(array, payloadId) {

  const pageAndIndex = array.reduce((acc, [{leftCol}, {rightCol}], i) => {
    if ((leftMatch = leftCol.findIndex(p => p.id === payloadId)) !== -1) {
      acc['idx'] = leftMatch;
      acc['pageNum'] = i;
      acc['colIdx'] = 0;
    } else if ((rightMatch = rightCol.findIndex(p => p.id === payloadId)) !== -1) {
      acc['idx'] = rightMatch;
      acc['pageNum'] = i;
      acc['colIdx'] = 1;
    }
    return acc
  }, {})
  
  return pageAndIndex;
}

console.log(getIdxAndPageNumOfColumn(pages, 30));
console.log(getIdxAndPageNumOfColumn(pages, 110));

Alternative approach using Object.values

let pages = [/* Array of page objects with leftCol and rightCol arrays */];

function getIdxAndPageNumOfColumn(array, payloadId) {

  const pageAndIndex = array.reduce((acc, pArr, pi) => {
    pArr.forEach((col, ci) => {
      Object.values(col).forEach(v => {
        if ((match = v.findIndex(p => p.id === payloadId)) !== -1) {
          acc['idx'] = match;
          acc['pageNum'] = pi;
          acc['colIdx'] = ci;
        }
      });
    });
    return acc
  }, {});
  
  return pageAndIndex;
}

console.log(getIdxAndPageNumOfColumn(pages, 30));
console.log(getIdxAndPageNumOfColumn(pages, 110));

Answer 5

Answer №3

Give this a shot:

const searchPage = (pages, id) =>
  new Promise((resolve) => {
    pages.map((page) => {
      page.map((p) => {
        Object.entries(p).map(([key, value]) => {
          const result = value.filter((item) => item.id === id);
          if (result.length > 0) {
            resolve(result[0]);
          }
        });
      });
    });
  });

searchPage(pagesArray, desiredIdToFind).then(console.log);

Answer 6

Give this a shot:

const searchPage = (pages, id) =>
  new Promise((resolve) => {
    pages.map((page) => {
      page.map((p) => {
        Object.entries(p).map(([key, value]) => {
          const result = value.filter((item) => item.id === id);
          if (result.length > 0) {
            resolve(result[0]);
          }
        });
      });
    });
  });

searchPage(pagesArray, desiredIdToFind).then(console.log);

Answer 7

Answer №4

Here is the code snippet you requested.

function locateIndex(elements, identifier) {
    for (let pointer = 0; pointer < elements.length; pointer++) {
        const rows = elements[pointer];
        for (const column of rows) {
            for (const key in column) {
                const itemFound = column[key].find((obj) => obj.id == identifier);
                if (itemFound) return pointer;
            }
        }
    }
}

const result = locateIndex(elementsArray, 110);
console.log(result);

Answer 8

Here is the code snippet you requested.

function locateIndex(elements, identifier) {
    for (let pointer = 0; pointer < elements.length; pointer++) {
        const rows = elements[pointer];
        for (const column of rows) {
            for (const key in column) {
                const itemFound = column[key].find((obj) => obj.id == identifier);
                if (itemFound) return pointer;
            }
        }
    }
}

const result = locateIndex(elementsArray, 110);
console.log(result);

Searching for the positions of nested array elements using their identifiers

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Leverage the Axios package to make requests within a for loop

Encountering a CORS error while trying to fetch a YouTube page in React

How to deactivate the mobile hardware back button functionality in Ionic 2

Sending a post request in AngularJS using the $resource API

Doing a simple HTTP GET request with RxJS does not do anything

The String.match() function may not always return the expected result, as it can sometimes return null

Three.js: transforming textures into data textures

Tips for invoking a function from a JavaScript file within an Angular component

Display or conceal elements by utilizing ng-show/ng-hide according to specific conditions

Ways to verify the uniqueness of usernames within Firebase

Volar and vue-tsc are producing conflicting TypeScript error messages

Steer clear of changing props directly in VueJS to prevent unintended

Inspecting boxes and merged text result

A game inspired by Cube Crash, using Actionscript 3.0

Prevent selection of weekend dates in Angular Bootstrap datepicker with a personalized directive

Is it necessary to reload the document ready event after injecting an Ajax response into the DOM?

The collapsing html menu remains in place instead of navigating to the designated id

The problem of interpreting JSON using the JavaScript eval() function

Error: IndexOutOfRangeException occurred within my array

Experiencing problems with the response from the Netlify Lambda function.. consistently receiving undefined results