What is the best method to add data to a child array located within a nested array?

Question

What is the best method to add data to a child array located within a nested array?

Struggling to create an array that will display data in the following format:

Healthcare
-- Insights driven by data for improved healthcare
-- Urban Analytics
Transport
-- Urban Analytics
Cities
-- Urban Analytics

I have attempted to iterate over 'expertise' and 'text', but I am having difficulty getting them to work together to achieve the desired output within console.log

Any assistance or guidance would be greatly appreciated.

    var items = [{
            "item": {
                "id": 0,
                "sector": 'Data',
                "expertise": ["Healthcare"],
                "text": "Insights driven by data for improved healthcare"
            }
        },
        {
            "item": {
                "id": 1,
                "sector": 'Data',
                "expertise": ["Healthcare", "Transport", "Cities"],
                "text": "Urban Analytics"
            }
        }
    }];

    var array = [];

    for (var i = 0; i < items.length; i++) {

        var arr = [{
            'title': items[i].item.sector,
            'items': []
        }];

        for (var j = 0, b = items[i].item.expertise.length; j < b; j++) {
            if (items[i].item.expertise[j] == expertise) {

                arr[0]['items'].push({
                    'list': items[i].item.text
                });

            }
        }

        array.push(arr);

    }

    console.log(array);

javascript arrays typescript pure-js

Answer 1

Answer №1

To begin, I suggest creating an object containing relevant expertise and text lists, then displaying the output in your preferred format. Here is a simple example:

var items = [{
  "item": {
    "id": 0,
    "sector": 'Technology',
    "expertise": ["Cybersecurity"],
    "text": "Protecting digital assets"
  }
}, {
  "item": {
    "id": 1,
    "sector": 'Technology',
    "expertise": ["Cybersecurity", "Data Privacy", "AI"],
    "text": "Securing sensitive information"
  }
}]
    
const obj = items.reduce((res, { item }) => {
  item.expertise.forEach(e => {
    res[e] = res[e] || []
    if(res[e].indexOf(item.text) < 0){ res[e].push(item.text) }
  })
  return res
}, {})

Object.keys(obj).forEach(k => {
  console.log(k)
  obj[k].forEach(text => console.log(`-- ${text}`))
})

Answer 2

To begin, I suggest creating an object containing relevant expertise and text lists, then displaying the output in your preferred format. Here is a simple example:

var items = [{
  "item": {
    "id": 0,
    "sector": 'Technology',
    "expertise": ["Cybersecurity"],
    "text": "Protecting digital assets"
  }
}, {
  "item": {
    "id": 1,
    "sector": 'Technology',
    "expertise": ["Cybersecurity", "Data Privacy", "AI"],
    "text": "Securing sensitive information"
  }
}]
    
const obj = items.reduce((res, { item }) => {
  item.expertise.forEach(e => {
    res[e] = res[e] || []
    if(res[e].indexOf(item.text) < 0){ res[e].push(item.text) }
  })
  return res
}, {})

Object.keys(obj).forEach(k => {
  console.log(k)
  obj[k].forEach(text => console.log(`-- ${text}`))
})

Answer 3

Answer №2

Utilizing the map function is recommended in this case

const updatedArray = items.map(item => ({
    title: item.item.category,
    details: [...item.item.skills, {
        category: item.item.details
    }]
});

Answer 4

Utilizing the map function is recommended in this case

const updatedArray = items.map(item => ({
    title: item.item.category,
    details: [...item.item.skills, {
        category: item.item.details
    }]
});

Answer 5

Answer №3

Below is a different method using the reduce() function, along with destructuring and the spread operator

const itemsList = [
  {
    "item": {
      "id": 0,
      "sector": 'Technology',
      "expertise": ["AI"],
      "description": "Artificial Intelligence advancements"
    }
  },
  {
    "item": {
      "id": 1,
      "sector": 'Technology',
      "expertise": ["AI", "Blockchain"],
      "description": "Cutting-edge technology innovations"
    }  
  }
];

let result = itemsList.reduce((accumulator, {item: {expertise, description}}) =>
{
     expertise.forEach(item => accumulator[item] = [...(accumulator[item] || []), description]);
     return accumulator;
}, {});


Object.entries(result).forEach(([key, value]) =>
{
    console.log(key + "\n->" + value.join("\n->"));
});

Answer 6

Below is a different method using the reduce() function, along with destructuring and the spread operator

const itemsList = [
  {
    "item": {
      "id": 0,
      "sector": 'Technology',
      "expertise": ["AI"],
      "description": "Artificial Intelligence advancements"
    }
  },
  {
    "item": {
      "id": 1,
      "sector": 'Technology',
      "expertise": ["AI", "Blockchain"],
      "description": "Cutting-edge technology innovations"
    }  
  }
];

let result = itemsList.reduce((accumulator, {item: {expertise, description}}) =>
{
     expertise.forEach(item => accumulator[item] = [...(accumulator[item] || []), description]);
     return accumulator;
}, {});


Object.entries(result).forEach(([key, value]) =>
{
    console.log(key + "\n->" + value.join("\n->"));
});

What is the best method to add data to a child array located within a nested array?

Answer №1

Answer №2

Answer №3

Similar questions

The issue of JQuery Mobile not recognizing HREF links when combined with Javascript

Choosing a value from a dropdown automatically based on the selection of a specific value from another dropdown

The Typescript SyntaxError occurs when attempting to use an import statement outside of a module, typically within a separate file that contains

Getting started with `sessionStorage` in a React application

What strategies can I implement to ensure my modal dialog box remains responsive? Adjusting the window size causes the modal box to malfunction and lose its structure

Obtain a byte array from an AngularJs controller

The onmessage event in the websocket client seems to be malfunctioning and is not triggering

Checking the validity of date inputs - microservice for timestamps

Expanding the functionality of Element.prototype, problem related to anchor

Exploring the power of Vue's v-for directive with nested

Is it possible to achieve real-time two-way data binding in a reactive form by passing values from one formgroup to another formgroup? If so, how

Is there a way to identify the duplicated input element values using jquery?

Attributes of the host element in Angular 1.5 components

Leverage the power of Typescript to flatten a JSON model with the help of Class

Merging two promises into a single promise in Angular

Nested interfaces can utilize sum types

How can I submit a form or retrieve HTML content using JavaScript without using an iframe?

Difficulty encountered while deploying a React application on Netlify

The Debate: Single Javascript File vs. Lazy Loading

How to effectively manage radio buttons in Angular 6