Tips for simplifying a nested object array to access non-essential content values

Question

Tips for simplifying a nested object array to access non-essential content values

I need to extract all unique refIds from a nested object array, regardless of the level they are located at.

Attempting to loop through with for-loops has proven to be overly complex, especially since I'm unsure of the exact depth of the data. However, there is always a

"type": "text"

element with an optional "marks" field.

[
  {
    "type": "bulletList",
    "content": [
      {
        "type": "listItem",
        "content": [
          {
            "type": "paragraph",
            "content": [
              {
                "type": "text",
                "marks": [ // optional mark
                  { "type": "refId", "attrs": { "refIds": [123, 234] } } // need this values
                ],
                "text": "Item 1"
              }
            ]
          }
        ]
      },
      {
        "type": "listItem",
        "content": [
          {
            "type": "paragraph",
            "content": [
              {
                "type": "text",
                "marks": [{ "type": "refId", "attrs": { "refIds": [987] } }],
                "text": "Item 2"
              }
            ]
          }
        ]
      },
      {
        "type": "listItem",
        "content": [
          {
            "type": "paragraph",
            "content": [{ "type": "text", "text": "Item 3" }] // has no mark
          },
          {
            "type": "bulletList", // example for nested child
            "content": [
              {
                "type": "listItem",
                "content": [
                  {
                    "type": "paragraph",
                    "content": [
                      {
                        "type": "text",
                        "marks": [
                          { "type": "refId", "attrs": { "refIds": [876] } }
                        ],
                        "text": "Sub 1"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

The desired output should be:

["123", "234", "876", "987"]

javascript arrays

Answer 1

Answer №1

To gather unique IDs from arrays and objects, simply walk through recursively and store the IDs in a set:

const walk = (arr, out = new Set) => {
  if(Array.isArray(arr)){
    arr.forEach(r => walk(r, out));
  }else if(arr && typeof arr ==='object'){
    for(const key in arr){
      if(key === 'refIds' && Array.isArray(arr[key])){
        arr[key].forEach(r => out.add(r));
      }else walk(arr[key], out);
    }
  }
  return out;

}

const result = [...walk(arr)];

console.log(result);

<script>
const arr=[{type:"bulletList",content:[{type:"listItem",content:[{type:"paragraph",content:[{type:"text",marks:[{type:"refId",attrs:{refIds:[123,234]}}],text:"Item 1"}]}]},{type:"listItem",content:[{type:"paragraph",content:[{type:"text",marks:[{type:"refId",attrs:{refIds:[987]}}],text:"Item 2"}]}]},{type:"listItem",content:[{type:"paragraph",content:[{type:"text",text:"Item 3"}]},{type:"bulletList",content:[{type:"listItem",content:[{type:"paragraph",content:[{type:"text",marks:[{type:"refId",attrs:{refIds:[876]}}],text:"Sub 1"}]}]}]}]}]}];
</script>

Answer 2

To gather unique IDs from arrays and objects, simply walk through recursively and store the IDs in a set:

const walk = (arr, out = new Set) => {
  if(Array.isArray(arr)){
    arr.forEach(r => walk(r, out));
  }else if(arr && typeof arr ==='object'){
    for(const key in arr){
      if(key === 'refIds' && Array.isArray(arr[key])){
        arr[key].forEach(r => out.add(r));
      }else walk(arr[key], out);
    }
  }
  return out;

}

const result = [...walk(arr)];

console.log(result);

<script>
const arr=[{type:"bulletList",content:[{type:"listItem",content:[{type:"paragraph",content:[{type:"text",marks:[{type:"refId",attrs:{refIds:[123,234]}}],text:"Item 1"}]}]},{type:"listItem",content:[{type:"paragraph",content:[{type:"text",marks:[{type:"refId",attrs:{refIds:[987]}}],text:"Item 2"}]}]},{type:"listItem",content:[{type:"paragraph",content:[{type:"text",text:"Item 3"}]},{type:"bulletList",content:[{type:"listItem",content:[{type:"paragraph",content:[{type:"text",marks:[{type:"refId",attrs:{refIds:[876]}}],text:"Sub 1"}]}]}]}]}]}];
</script>

Answer 3

Answer №2

It appears that the missing number 876 in the output was a mistake. To address this, you can utilize the .flatMap() method on your array. By mapping each object and checking if its type is text, you can then examine a nested marks array to extract an array of ids using another flatMap. The inner arrays generated by this process will be flattened into the final array returned by the parent .flatMap(), avoiding any nesting issues.

If an object's type is not text, you can recursively call the function getRefIds() with the current object's content to retrieve the refIds from that nested array. This recursive step handles cases where the content may not exist or needs to be ignored when flattening the resulting array. Finally, converting the result into a Set and back into an array helps in deduplicating the values:

// JavaScript code snippet
// Your array data here...

const getRefIds = (arr) => {
  return arr.flatMap(({type, content = [], marks = []}) => type === "text" 
    ? marks.flatMap(mark => mark.attrs.refIds)
    : getRefIds(content)
  );
}

const res = Array.from(new Set(getRefIds(arr)));
console.log(res);

In scenarios where handling large datasets efficiently is crucial, you may opt for a nested recursive approach instead of creating intermediate arrays during each recursive call. The following example illustrates this method to improve performance:

// JavaScript code snippet
// Your array data here...

const getRefIds = (arr) => {
  const refIds = new Set();
  const searchContent = (contentArr) => {
    for(const {type, content = [], marks = []} of contentArr) {
      if (type === "text")
        marks.forEach(mark => {
          if (mark.type === "refId")
            mark.attrs.refIds.forEach(id => refIds.add(id));
        });
      else
        searchContent(content);
    }
  } 
  searchContent(arr);
  return Array.from(refIds);
}

const res = getRefIds(arr);
console.log(res);

Answer 4

It appears that the missing number 876 in the output was a mistake. To address this, you can utilize the .flatMap() method on your array. By mapping each object and checking if its type is text, you can then examine a nested marks array to extract an array of ids using another flatMap. The inner arrays generated by this process will be flattened into the final array returned by the parent .flatMap(), avoiding any nesting issues.

If an object's type is not text, you can recursively call the function getRefIds() with the current object's content to retrieve the refIds from that nested array. This recursive step handles cases where the content may not exist or needs to be ignored when flattening the resulting array. Finally, converting the result into a Set and back into an array helps in deduplicating the values:

// JavaScript code snippet
// Your array data here...

const getRefIds = (arr) => {
  return arr.flatMap(({type, content = [], marks = []}) => type === "text" 
    ? marks.flatMap(mark => mark.attrs.refIds)
    : getRefIds(content)
  );
}

const res = Array.from(new Set(getRefIds(arr)));
console.log(res);

In scenarios where handling large datasets efficiently is crucial, you may opt for a nested recursive approach instead of creating intermediate arrays during each recursive call. The following example illustrates this method to improve performance:

// JavaScript code snippet
// Your array data here...

const getRefIds = (arr) => {
  const refIds = new Set();
  const searchContent = (contentArr) => {
    for(const {type, content = [], marks = []} of contentArr) {
      if (type === "text")
        marks.forEach(mark => {
          if (mark.type === "refId")
            mark.attrs.refIds.forEach(id => refIds.add(id));
        });
      else
        searchContent(content);
    }
  } 
  searchContent(arr);
  return Array.from(refIds);
}

const res = getRefIds(arr);
console.log(res);

Answer 5

Answer №3

function extractAllIDs(content) {
const uniqueIds = new Set();

function searchElements(element) {
    if (element.type === "text" && element.marks) {
        element.marks.forEach(mark => {
            if (mark.type === "refId" && mark.attrs && mark.attrs.refIds) {
                mark.attrs.refIds.forEach(refId => uniqueIds.add(refId));
            }
        });
    }

    if (element.content) {
        element.content.forEach(child => searchElements(child));
    }
}

content.forEach(item => searchElements(item));
return [...uniqueIds];

}

Answer 6

function extractAllIDs(content) {
const uniqueIds = new Set();

function searchElements(element) {
    if (element.type === "text" && element.marks) {
        element.marks.forEach(mark => {
            if (mark.type === "refId" && mark.attrs && mark.attrs.refIds) {
                mark.attrs.refIds.forEach(refId => uniqueIds.add(refId));
            }
        });
    }

    if (element.content) {
        element.content.forEach(child => searchElements(child));
    }
}

content.forEach(item => searchElements(item));
return [...uniqueIds];

}

Tips for simplifying a nested object array to access non-essential content values

Answer №1

Answer №2

Answer №3

Similar questions

Exploring a Ruby nested data structure: accessing a hash within an array nested within another hash, and incorporating a

Filtering JSON objects in Vue when the API is only returning a limited number of items

Accessing an element in an array within the .data section could result in a memory fault due to an address significantly exceeding

Creating a GET endpoint for a RESTful API with nodeJS

Updating field based on dropdown value in CakePHP 3.6.11

What is the best way to apply a class to a container when a component in AngularJS receives focus or is clicked?

Creating a stunning full-screen background effect using HTML and CSS with the help

The router should display a component based on the user's access level, even if they are

When the react autocomplete dropdown appears, it pushes other input elements downward, affecting their

Condensing a function to tally the distinct characters within a two-dimensional array

Combining React, Typescript, and asynchronous Promises

Sequelize error: An unknown column is encountered in the field list while including a model without specifying the `attributes` field

Ways to customize background color for a particular date?

Extract and loop through JSON data containing various headers

Is it feasible to conceal a certain field once the user has chosen another field?

An error occurred when attempting to use the getDoc() function from Firebase within Next.js: TypeError - reading 'map' on properties of undefined

Within the ng-repeat loop, every switch button undergoes a status change

What are the steps for utilizing the Object.entries(...) method along with .forEach and .every

Is there a way to use a jQuery puff effect that will automatically bring the Div back to its original state after

What could be causing errors in converting Vue.js code into a single HTML file?