Looping through nested array of objects, matching to another array of objects

Question

I am new to Javascript and am trying to loop through one nested array of objects, and filtering a second array of objects based on properties of the first.

Here are both arrays' structures:

const displayArr = {
   sections: {
      section_1: [
        {
          style: "single_select_cmp",
          definition: {
            table_name: "table_1",
            field_name: "organization",
          }
        },
      ],
      section_2: [
        {
          style: "single_select_cmp",
          definition: {
            table_name: "table_1",
            field_name: "title",
          }
        },
      ]
   }
};

const schemaArr = [
  {
    table_1: {
      columns: [
        {
          description: "Tracking Number Desc",
          display_name: "Tracking Number",
          display_type: "number",
          field: "tracking_number",
          type: "int"
        },
        {
          description: "Title Desc",
          display_name: "Title",
          display_type: "multiple lines of text",
          field: "title",
          type: "text"
        },
        {
          description: "Description Desc",
          display_name: "Description",
          display_type: "multiple lines of text",
          field: "description",
          type: "text"
        },
        {
          description: "Organization Desc",
          display_name: "Organization",
          display_type: "single line of text",
          field: "organization",
          type: "text"
        }
     ]
   }
 },
 {
  table_2: { columns: [ {...}, {...} ] }
 },
 {
  table_3: { columns: [ {...}, {...} ] }
 }
 ...
]

I am trying to filter schemaArr by table_name and field_name in the displayArr. When there is a match, I would like to supply the description and display_name to the displayArr. For example:

const displayArr = {
   sections: {
      section_1: [
        {
          style: "single_select_cmp",
          definition: {
            table_name: "table_1",
            field_name: "organization",
            description: "Organization Description", //***
            display_name: "Organization" //***
          }
        },
      ],
      section_2: [
        {
          style: "single_select_cmp",
          definition: {
            table_name: "table_1",
            field_name: "title",
            description: "Title Description", //***
            display_name: "Title" //***
          }
        },
      ]
   }
};

In this example, I am only pulling from table_1, however there may be any number of tables referenced in displayArr.

To me, given these objects are nested, this is a more complex mapping/filtering situation. I'm wondering how to correctly and efficiently leverage map, filter, and/or forEach.

Thank you in advance for your help! Really appreciate it.

Nikhil · Accepted Answer · 2019-10-24 21:03:10Z

1

Object.values() can be used to get values of displayArr object and forEach() can be used to iterate on it.

find() method can be used to find the table with table_name in schemaArr. If table exists, then find() method can be used again to find the column with item's field_name.

Then displayArr object's definition item can be updated with this found column values.

Object.values(displayArr.sections).forEach(section => {
  section.forEach(item => {
    let table = schemaArr.find(table => table[item.definition.table_name]);

    if (table) {
      // Find column by field_name.
      let obj = table[item.definition.table_name].columns.find(column => column.field === item.definition.field_name);           

      if (obj) {
        // Update definition.
        item.definition.description = obj.description;
        item.definition.display_name = obj.display_name;
      }
    }
  });
});

edited Oct 24, 2019 at 21:03

answered Oct 24, 2019 at 19:40

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

BWeb303 Over a year ago

this makes perfect sense. I realized I said schemaArr was an object, but really it is an array of table objects. I've updated my question accordingly.

Nikhil Over a year ago

@BWeb303 - No problem, we can use find() method to find the table in the array. But schemaArr in your edited question isn't valid, arrays can't have property names. Do you have something like schemaArr = [{table_1: ...}, {table_2: ...}, ...] instead?

BWeb303 Over a year ago

argh.. you're absolutely right. My apologies. The client's data is structured as follows: schemaArr = [ {table_1: { columns: [ {...}, {...} ] } }, {table_2:....} ]. Certainly not best practice, but that is what I'm working with. I've updated my question to reflect the true schema structure. This would likely change how table is being set in your response.

Nikhil Over a year ago

@BWeb303 - No problem. I thought so. See my edited answer. Also, is displayArr an object or an array? Let me know if you have any questions.

BWeb303 Over a year ago

In reality I'm actually just calling sections as is. I'm not stuffing sections into displayArr or some other object. So I think I would do Object.values(sections) instead. Really sorry for all the errors on my part. I appreciate your help.

|

Collectives™ on Stack Overflow

Looping through nested array of objects, matching to another array of objects

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related