Как организовать / сгруппировать по указанному c id

Question

Я хотел бы знать, как этого добиться. В основном я должен показать эти данные в профиль. Идея состоит в том, чтобы показать advocacy в качестве заголовка, а particular_interest будет указан под advocacy

, так что это будет что-то вроде:

Advocacy 1
Особый интерес 1
Особый интерес 2
Особый интерес 3

Адвокация 2
Особый интерес 4
Особый интерес 5

Адвокат 3
Особый интерес 6

Проблема в том, что у меня есть данные:

data = [{
  admin_advocacy: { id: '2', advocacy: 'Advocacy 1' },
  admin_advocacy_id: '2',
  donor_id: 14,
  id: 67,
  particular_interest: 'particular interest 1',
},
{
  admin_advocacy: { id: '2', advocacy: 'Advocacy 1' },
  admin_advocacy_id: '2',
  donor_id: 14,
  id: 68,
  particular_interest: 'particular interest 2',
},
{
  admin_advocacy: { id: '2', advocacy: 'Advocacy 1' },
  admin_advocacy_id: '2',
  donor_id: 14,
  id: 69,
  particular_interes: 'particular interest 3',
},
{
  admin_advocacy: { id: '3', advocacy: 'Advocacy 2' },
  admin_advocacy_id: '3',
  donor_id: 14,
  id: 70,
  particular_interes: 'particular interest 4',
},
{
  admin_advocacy: { id: '3', advocacy: 'Advocacy 2'},
  admin_advocacy_id: '3',
  donor_id: 14,
  id: 70,
  particular_interest: 'particular interest 4',
},
{
  admin_advocacy: { id: '3', advocacy: 'Advocacy 2'},
  admin_advocacy_id: '3',
  donor_id: 14,
  id: 71,
  particular_interest: 'particular interest 5',
},
{
  admin_advocacy: { id: '4', advocacy: 'Advocacy 3'},
  admin_advocacy_id: '4',
  donor_id: 14,
  id: 72,
  particular_interest: 'particular interest 6',
}]

, поэтому я был бы очень признателен, чтобы узнать, как сгруппировать particular_interest по advocacy , Спасибо

Answer 1

Компонент

this.result = data.reduce((prev, curr) => {
        const currAdv = curr.admin_advocacy.advocacy;
        prev[currAdv] = prev[currAdv] || [];
        prev[currAdv].push(curr.particular_interest);
        return prev;
    }, {});

HTML

<div *ngFor="let item of result | keyvalue">
        <h3>{{ item.key }}</h3>
        <ul>
            <li *ngFor="let i of item.value">
                {{ i }}
            </li>
        </ul>
    </div>

Answer 2

Просто по loop вы можете сгруппировать его.

 const obj = {};

 data.forEach(item => {
    let key = item.admin_advocacy.advocacy;    
    obj[key] = obj[key] || {};
    obj[key].interest = obj[key].interest || [];
    obj[key].interest.push(item.particular_interest);
 });

 console.log(obj);

Он вернет вам объект с групповым интересом. Смотрите ниже:

{
  "Advocacy 1": {
    "interest": ["particular interest 1", "particular interest 2", "particular interest 3"]
 },
  "Advocacy 2": {
    "interest": ["particular interest 4", "particular interest 5"]
 }
  "Advocacy 3": {
    "interest": ["particular interest 6"]
 }
}

Answer 3

Некоторые из ваших particular_interest в вашем JSON - particular_interes, я предполагаю, что это опечатка, и переведите ее в particular_interest. И есть под дубликатом пункт под Advocacy 2, я сохранил его.

Мой подход использует уменьшение.

data.reduce((acc, cur) => {
    curAdvocacy = cur['admin_advocacy']['advocacy']
    acc[curAdvocacy] = acc[curAdvocacy] || []
    acc[curAdvocacy].push(cur['particular_interest'])
    return acc
  }, {})

data = [{
  admin_advocacy: { id: '2', advocacy: 'Advocacy 1' },
  admin_advocacy_id: '2',
  donor_id: 14,
  id: 67,
  particular_interest: 'particular interest 1',
},
{
  admin_advocacy: { id: '2', advocacy: 'Advocacy 1' },
  admin_advocacy_id: '2',
  donor_id: 14,
  id: 68,
  particular_interest: 'particular interest 2',
},
{
  admin_advocacy: { id: '2', advocacy: 'Advocacy 1' },
  admin_advocacy_id: '2',
  donor_id: 14,
  id: 69,
  particular_interest: 'particular interest 3',
},
{
  admin_advocacy: { id: '3', advocacy: 'Advocacy 2' },
  admin_advocacy_id: '3',
  donor_id: 14,
  id: 70,
  particular_interest: 'particular interest 4',
},
{
  admin_advocacy: { id: '3', advocacy: 'Advocacy 2'},
  admin_advocacy_id: '3',
  donor_id: 14,
  id: 70,
  particular_interest: 'particular interest 4',
},
{
  admin_advocacy: { id: '3', advocacy: 'Advocacy 2'},
  admin_advocacy_id: '3',
  donor_id: 14,
  id: 71,
  particular_interest: 'particular interest 5',
},
{
  admin_advocacy: { id: '4', advocacy: 'Advocacy 3'},
  admin_advocacy_id: '4',
  donor_id: 14,
  id: 72,
  particular_interest: 'particular interest 6',
}]

function group(data) {
  return data.reduce((acc, cur) => {
    curAdvocacy = cur['admin_advocacy']['advocacy']
    acc[curAdvocacy] = acc[curAdvocacy] || []
    acc[curAdvocacy].push(cur['particular_interest'])
    return acc
  }, {})

}


document.getElementById("json").innerHTML=JSON.stringify(group(data), undefined, 2)

Answer 4

 mapArray() {
    const groupBy = (array, key) => {
      // Return the end result
      return array.reduce((result, currentValue) => {
        // If an array already present for key, push it to the array. Else create an array and push the object
        (result[currentValue[key]] = result[currentValue[key]] || []).push(
          currentValue
        );

        if (!result[currentValue[key]]) {
          result[currentValue[key]] = [];
        }
        result[currentValue[key]].push(currentValue);
        // Return the current iteration `result` value, this will be taken as next iteration `result` value and accumulate
        return result;
      }, {}); // empty object is the initial value for result object
    };

    // Group by color as key to the person array
    const personGroupedByColor = groupBy(this.data, 'admin_advocacy_id');
    console.log(personGroupedByColor);

  }

Answer 5

Я бы использовал комбинацию функции массива reduce и объекта Map.

const data = [{
  admin_advocacy: { id: '2', advocacy: 'Advocacy 1' },
  admin_advocacy_id: '2',
  donor_id: 14,
  id: 67,
  particular_interest: 'particular interest 1',
},
{
  admin_advocacy: { id: '2', advocacy: 'Advocacy 1' },
  admin_advocacy_id: '2',
  donor_id: 14,
  id: 68,
  particular_interest: 'particular interest 2',
},
{
  admin_advocacy: { id: '2', advocacy: 'Advocacy 1' },
  admin_advocacy_id: '2',
  donor_id: 14,
  id: 69,
  particular_interest: 'particular interest 3',
},
{
  admin_advocacy: { id: '3', advocacy: 'Advocacy 2' },
  admin_advocacy_id: '3',
  donor_id: 14,
  id: 70,
  particular_interest: 'particular interest 4',
},
{
  admin_advocacy: { id: '3', advocacy: 'Advocacy 2'},
  admin_advocacy_id: '3',
  donor_id: 14,
  id: 70,
  particular_interest: 'particular interest 4',
},
{
  admin_advocacy: { id: '3', advocacy: 'Advocacy 2'},
  admin_advocacy_id: '3',
  donor_id: 14,
  id: 71,
  particular_interest: 'particular interest 5',
},
{
  admin_advocacy: { id: '4', advocacy: 'Advocacy 3'},
  admin_advocacy_id: '4',
  donor_id: 14,
  id: 72,
  particular_interest: 'particular interest 6',
}];

// create a map to store unique advocacy groups
const map = new Map();

// use "reduce" to loop through each item in data and create an array of advocacy groups
const grouped = data.reduce((arr, current) => {
  const advocacy = current.admin_advocacy.advocacy;
  // find the previously created group
  let group = map.get(advocacy); 
  if (!group) {
    // no previously created group - create a new one
    group = {
      advocacy: advocacy,
      interests: []
    };
    
    // add the group to the map and the return array
    map.set(current.admin_advocacy.advocacy, group);         
    arr.push(group);
  }
  
  // only add unique interests to the group
  if (!group.interests.some(x => x.id === current.id)) {
    group.interests.push({
      id: current.id,
      particular_interest: current.particular_interest
    });
  }
  
  // return the array to the next iteration
  return arr;
}, []);

console.log(grouped);