Adjust the tally of search results and modify the selection depending on the frequency of the user's searches within an array of objects

Question

Adjust the tally of search results and modify the selection depending on the frequency of the user's searches within an array of objects

Seeking assistance with adding a new function that allows users to navigate to the next searched result. Big thanks to @ggorlen for aiding in the recursive search.

https://i.stack.imgur.com/OsZOh.png

I have a recursive search method that marks the first value as selected = true, and if it's within a nested array, sets showTree=true.

How can I implement a feature where clicking on the next search record will update the 'selected' value to the next result while removing the previous one?
Additionally, how can I reflect changes in the 'showTree' based on the updated results?
Is there a way to introduce a variable that updates each time the search function is called...
Providing a means for users to navigate back to the previous search result.

const expandPath = (nodes, targetLabel) => {
  for (const node of nodes) {
    if (node.label.includes(targetLabel)) {
      return (node.selected = true);
    } else if (expandPath(node.item, targetLabel)) {
      return (node.showTree = true);
    }
  }
};

// Output

expandPath(testData, 'ch');

//// add variable for count  example: 1 of 25

console.log(testData);

//if user click on nextrecord after search


//nextrecord(){
//logic to remove the selected true from current and add for next
//update showtree
//update recordNumber of totalValue example: 2 of 25
//}


//child3 should get selected true and remove child1 selected true and showtree
//same add showTree= true based on selected value

//if user click on previous record after search

//previousrecord(){
//logic to remove the selected true from current and add for previous
//update showtree
//update recordNumber of totalValue example: 1 of 25
//}



console.log(testData);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script>
// Test Data
const testData = [
  {
    id: 1,
    label: 'parent1',
    item: [
      {
        id: 21,
        label: 'child1',
        item: [
          {
            id: 211,
            label: 'child31',
            item: [
              {
                id: 2111,
                label: 'child2211',
                item: [{ id: 21111, label: 'child22111' }]
              }
            ]
          },
          { id: 222, label: 'child32' }
        ]
      },
      {
        id: 22,
        label: 'child2',
        item: [
          {
            id: 221,
            label: 'child421',
            item: [{ id: 2211, label: 'child2211' }]
          },
          { id: 222, label: 'child222' }
        ]
      }
    ]
  },
  {
    id: 2,
    label: 'parent2',
    item: [
      {
        id: 21,
        label: 'child2',
        item: [
          {
            id: 511,
            label: 'child51',
            item: [
              {
                id: 5111,
                label: 'child5211',
                item: [{ id: 51111, label: 'child52111' }]
              }
            ]
          },
          { id: 522, label: 'child352' }
        ]
      }
    ]
  }
];
</script>

javascript arrays angular typescript

Answer 1

Answer №1

To implement the code below, utilize the provided example:

    const userData = [
  {
    id: 1,
    name: 'user1',
    data: [
      {
        id: 11,
        title: 'post1',
        content: [
          {
            id: 111,
            message: 'comment1',
            replies: [
              {
                id: 1111,
                response: 'reply1',
                individual: [{ id: 11111, feedback: 'individual1' }]
              }
            ]
          },
          { id: 112, message: 'comment2' }
        ]
      },
      {
        id: 12,
        title: 'post2',
        content: [
          {
            id: 121,
            message: 'comment3',
            replies: [{ id: 1211, response: 'reply2' }]
          },
          { id: 122, message: 'comment4' }
        ]
      }
    ]
  },
  {
    id: 2,
    name: 'user2',
    data: [
      {
        id: 21,
        title: 'post3',
        content: [
          {
            id: 211,
            message: 'comment5',
            replies: [
              {
                id: 2111,
                response: 'reply3',
                individual: [{ id: 21111, feedback: 'individual2' }]
              }
            ]
          },
          { id: 212, message: 'comment6' }
        ]
      }
    ]
  }
];

// reorganize tree structure into an array and incorporate parent pointer
const flattenData = (userData) => {
  let flattenedData = [userData]
  if (userData.data) {
    for (const item of userData.data) {
      item.parent = userData;
      flattenedData = flattenedData.concat(flattenData(item));
    }
  }
  return flattenedData;
}

let flattenedUserData = [];

// transform user data into a flat structure
for (const user of userData) {
  flattenedUserData = flattenedUserData.concat(flattenData(user));
}

// update showInformation flag
const toggleView = (item, expand = true) => {
  const parentInfo = item.parent;
  if (parentInfo) {
    parentInfo.showInformation = expand;
    if (parentInfo.parent) {
      return toggleView(parentInfo, expand);
    }
    return parentInfo;
  }
  return item;
}

/**
 * 
 * @param {searchKeyword} lookup 
 * @returns method to navigate with forward or backward parameter
 */
const locateData = (lookup) => {
  let indexValue = -1;
  const itemsFound = flattenedUserData.filter(x => x.name.includes(lookup));
  return (forwardMove = true) => {
    if (indexValue > -1) {
      itemsFound[indexValue].viewed = false;
      toggleView(itemsFound[indexValue], false);
    }
    indexValue = indexValue + (forwardMove ? 1 : -1);
    let informationItem = null;
    if (indexValue > -1 && indexValue < itemsFound.length) {
      itemsFound[indexValue].viewed = true;
      informationItem = toggleView(itemsFound[indexValue], true);
    }
    return {
      informationItem,
      indexValue,
      totalMatches: itemsFound.length
    }
  }
}

const moveLocation = locateData('comment6');

// next information
let details = moveLocation();

// previous information
details = moveLocation(false);

// information output will be as follows
/**
 * {
 *  informationItem: root of current item with showInformation and viewed flags or null if out of range,
 *  indexValue: current match,
 *  totalMatches: total matches found
 * }
 * 
 */

Answer 2

To implement the code below, utilize the provided example:

    const userData = [
  {
    id: 1,
    name: 'user1',
    data: [
      {
        id: 11,
        title: 'post1',
        content: [
          {
            id: 111,
            message: 'comment1',
            replies: [
              {
                id: 1111,
                response: 'reply1',
                individual: [{ id: 11111, feedback: 'individual1' }]
              }
            ]
          },
          { id: 112, message: 'comment2' }
        ]
      },
      {
        id: 12,
        title: 'post2',
        content: [
          {
            id: 121,
            message: 'comment3',
            replies: [{ id: 1211, response: 'reply2' }]
          },
          { id: 122, message: 'comment4' }
        ]
      }
    ]
  },
  {
    id: 2,
    name: 'user2',
    data: [
      {
        id: 21,
        title: 'post3',
        content: [
          {
            id: 211,
            message: 'comment5',
            replies: [
              {
                id: 2111,
                response: 'reply3',
                individual: [{ id: 21111, feedback: 'individual2' }]
              }
            ]
          },
          { id: 212, message: 'comment6' }
        ]
      }
    ]
  }
];

// reorganize tree structure into an array and incorporate parent pointer
const flattenData = (userData) => {
  let flattenedData = [userData]
  if (userData.data) {
    for (const item of userData.data) {
      item.parent = userData;
      flattenedData = flattenedData.concat(flattenData(item));
    }
  }
  return flattenedData;
}

let flattenedUserData = [];

// transform user data into a flat structure
for (const user of userData) {
  flattenedUserData = flattenedUserData.concat(flattenData(user));
}

// update showInformation flag
const toggleView = (item, expand = true) => {
  const parentInfo = item.parent;
  if (parentInfo) {
    parentInfo.showInformation = expand;
    if (parentInfo.parent) {
      return toggleView(parentInfo, expand);
    }
    return parentInfo;
  }
  return item;
}

/**
 * 
 * @param {searchKeyword} lookup 
 * @returns method to navigate with forward or backward parameter
 */
const locateData = (lookup) => {
  let indexValue = -1;
  const itemsFound = flattenedUserData.filter(x => x.name.includes(lookup));
  return (forwardMove = true) => {
    if (indexValue > -1) {
      itemsFound[indexValue].viewed = false;
      toggleView(itemsFound[indexValue], false);
    }
    indexValue = indexValue + (forwardMove ? 1 : -1);
    let informationItem = null;
    if (indexValue > -1 && indexValue < itemsFound.length) {
      itemsFound[indexValue].viewed = true;
      informationItem = toggleView(itemsFound[indexValue], true);
    }
    return {
      informationItem,
      indexValue,
      totalMatches: itemsFound.length
    }
  }
}

const moveLocation = locateData('comment6');

// next information
let details = moveLocation();

// previous information
details = moveLocation(false);

// information output will be as follows
/**
 * {
 *  informationItem: root of current item with showInformation and viewed flags or null if out of range,
 *  indexValue: current match,
 *  totalMatches: total matches found
 * }
 * 
 */

Answer 3

Answer №2

If you focus on one task at a time, it becomes easier to achieve the 'next' functionality you desire by transforming your recursive search into a generator function:

function* expandPath(nodes, targetLabel) {
  for (const node of nodes) {
    if (node.label.includes(targetLabel)) {
      yield (node.selected = true);
    } else if (expandPath(node.item, targetLabel)) {
      yield (node.showTree = true);
    }
  }
};

const gen = expandPath(mynodes, "thisTargetLabel");
gen.next()
gen.next() //<-- the next one

Without more context, answering the other questions is challenging, but it appears that incorporating state using an (es6) class could be beneficial:

class Searcher {
  constructor(mynodes, mylabel) {
    this.count=0;
    this.nodes=mynodes;
    this.label=mylabel;
    this.generateMatches(this.nodes);
    this.selectNode(this.matches[0]); // select the first node
  }

  generateMatches(nodes){
    this.matches=[];
    for (const node of nodes) {
      if (node.label.includes(this.label)) {
        this.matches.push(node);
      } else {
        this.generateMatches(nodes.node) 
      }
    }
  }

  updateTreeById(id, node){
    this.nodes.forEach(n=>n.showTree = false);
    for (const node of this.nodes) {
      if (node.id === id) {
        //noop but we are here
      } else if(this.updateTreeById(id, this.nodes.node)) {
        node.showTree = true;
      }
    }
  }

  selectNode(i){
    const index =  i % this.matches.length;
    this.currNodeId =  this.matches[index].id;
    this.matches[index].selected = true // we are wrapping around
    this.count = i; // setting your current count
    this.updateTreeById(this.matches[index].id)
    // update logic, reset trees
  }

  nextNode(){
    this.selectNode(this.count + 1)
  }
  prevNode(){
    this.selectNode(this.count - 1)
  }
}

Answer 4

If you focus on one task at a time, it becomes easier to achieve the 'next' functionality you desire by transforming your recursive search into a generator function:

function* expandPath(nodes, targetLabel) {
  for (const node of nodes) {
    if (node.label.includes(targetLabel)) {
      yield (node.selected = true);
    } else if (expandPath(node.item, targetLabel)) {
      yield (node.showTree = true);
    }
  }
};

const gen = expandPath(mynodes, "thisTargetLabel");
gen.next()
gen.next() //<-- the next one

Without more context, answering the other questions is challenging, but it appears that incorporating state using an (es6) class could be beneficial:

class Searcher {
  constructor(mynodes, mylabel) {
    this.count=0;
    this.nodes=mynodes;
    this.label=mylabel;
    this.generateMatches(this.nodes);
    this.selectNode(this.matches[0]); // select the first node
  }

  generateMatches(nodes){
    this.matches=[];
    for (const node of nodes) {
      if (node.label.includes(this.label)) {
        this.matches.push(node);
      } else {
        this.generateMatches(nodes.node) 
      }
    }
  }

  updateTreeById(id, node){
    this.nodes.forEach(n=>n.showTree = false);
    for (const node of this.nodes) {
      if (node.id === id) {
        //noop but we are here
      } else if(this.updateTreeById(id, this.nodes.node)) {
        node.showTree = true;
      }
    }
  }

  selectNode(i){
    const index =  i % this.matches.length;
    this.currNodeId =  this.matches[index].id;
    this.matches[index].selected = true // we are wrapping around
    this.count = i; // setting your current count
    this.updateTreeById(this.matches[index].id)
    // update logic, reset trees
  }

  nextNode(){
    this.selectNode(this.count + 1)
  }
  prevNode(){
    this.selectNode(this.count - 1)
  }
}

Adjust the tally of search results and modify the selection depending on the frequency of the user's searches within an array of objects

Answer №1

Answer №2

Similar questions

"Modifying Code Aesthetics in WebStorm/IDEA: A Step-by-

Having trouble copying an iframe from one div to another div?

Allow the words to seamlessly transition back and forth between columns in a continuous cycle

Ways to revert to the initial state in React.js

Can someone explain the process of utilizing forEach to add elements to an array using React's useState hook?

What is the method for retrieving the IDs of checkboxes that have been selected?

Enhance your application with realtime listeners that provide updates without the need to retrieve the entire database each time changes

What is the functionality of a nested child directive root element when placed at the same level as the parent directive root element?

Deliver real-time updates directly to clients using Django Channels and Websockets

Displaying rows in a mat-table based on a certain condition

What is the best way to find the vertex positions of a JSON model in

Is it possible to reposition the vertical scrollbar to a location that is not on the left or right side?

What causes the immediate firing of the DOM callback in Angular 1.2.9?

Retrieving the contents of a unique 404 error page using ajax

Avoid loading the page when the browser's back button is pressed with vue-router

Creating a Mithril.js Single Page Application (SPA) using a JSON data source: A

How to Extract Byte Array from ImageView in Android App

Allow images to be uploaded using the browser-policy package in Meteor

Show only the items in bootstrap-vue b-table when a filter is actively applied

Exploring the capabilities of zooming on SVG elements using D3 within an Angular