Структура реструктуризації JavaScript


16

У мене є масив з адресами учнів та батьків.

Наприклад,

  const users = [{
    id: 1,
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    parent_address: 'USA',
    relationship:'mother'
  },
  {
    id: 1,
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    parent_address: 'Spain',
    relationship:'father'
  },
  {
    id: 2,
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    parent_address: 'France',
    relationship:'father'
  }
];

Я намагаюся переформатувати це на наступний результат.

const list = [
{
    id: 1,
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    parent: [
        {
            parent_address: 'USA',
            relationship:'mother'
        },{
            parent_address: 'Spain',
            relationship:'father'
        }
    ]
},
{
    id: 2,
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    parent:[
        {
            parent_address: 'France',
            relationship:'father'
        }
    ]
}
];

Поки я намагався наступним чином. Я не впевнений, правильно це чи ні.

const duplicateInfo = [];
for (var i = 0; i < user[0].length; i++) {
    var parent = [];
    if (duplicateInfo.indexOf(user[0][i].id) != -1) {
        // Do duplicate stuff
    } else {
        // Do other
    }
    duplicateInfo.push(user[0][i].id);
}

1
Коротше кажучи - зробити його простіше для читачів майбутніх - ви хочете об'єднати parent_addressі relationshipв до parentоб'єкту, і об'єднати їх , коли повторюється ім'я та адресу електронної пошти знайдені.
Льюїс

2
Як можна прийняти батьківську адресу? Яку властивість слід використовувати для їх відношення? Дякую заздалегідь! :)
StepUp

Фрагмент коду в кінці не відповідає структурі даних. Ви говорите const list = []спочатку, але внизу ви повторюєте цей список, мабуть, повторившись user[0]. Ваш приклад код повинен відповідати.
TKoL

@Lewis так, я хочу точно так, як ти згадав.
Kathy

@SteUp, ці значення отримують з мого існуючого db та з'єднують із таблицею учнів та батьків. Що у мене є тільки ідентифікатор студента в батьківській таблиці.
Kathy

Відповіді:


12

Одним із підходів було б використання .reduce()з об'єктом як акумулятора. Для кожного ідентифікатора ви можете зберігати пов’язаний об’єкт із батьківським масивом, який ви можете додати у .reduce()зворотному дзвінку кожного разу, коли ви зустрінете новий об’єкт із тим самим ідентифікатором. Потім, щоб отримати масив об'єктів від вашого об'єкта, ви можете зателефонувати Object.values()на нього

Дивіться приклад нижче:

const users = [{ id: 1, name: 'John', email: 'johnson@mail.com', age: 25, parent_address: 'USA', relationship: 'mother' }, { id: 1, name: 'John', email: 'johnson@mail.com', age: 25, parent_address: 'Spain', relationship: 'father' }, { id: 2, name: 'Mark', email: 'mark@mail.com', age: 28, parent_address: 'France', relationship: 'father' } ];
const res = Object.values(users.reduce((acc, {parent_address, relationship, ...r}) => { // use destructuring assignment to pull out necessary values
  acc[r.id] = acc[r.id] || {...r, parents: []}
  acc[r.id].parents.push({parent_address, relationship}); // short-hand property names allows us to use the variable names as keys
  return acc;
}, {}));

console.log(res);

Оскільки ви згадали, що ви новачок у JS, можливо, це буде простіше зрозуміти більш імперативно (детальніше див. Коментарі до коду):

const users = [{ id: 1, name: 'John', email: 'johnson@mail.com', age: 25, parent_address: 'USA', relationship: 'mother' }, { id: 1, name: 'John', email: 'johnson@mail.com', age: 25, parent_address: 'Spain', relationship: 'father' }, { id: 2, name: 'Mark', email: 'mark@mail.com', age: 28, parent_address: 'France', relationship: 'father' } ];

const unique_map = {}; // create an object - store each id as a key, and an object with a parents array as its value
for(let i = 0; i < users.length; i++) { // loop your array object
  const user = users[i]; // get the current object
  const id = user.id; // get the current object/users's id
  
  if(!(id in unique_map)) // check if current user's id is in the the object
    unique_map[id] = { // add the id to the unique_map with an object as its associated value 
      id: id,
      name: user.name,
      email: user.email,
      age: user.age,
      parents: [] // add `parents` array to append to later
    }
    
  unique_map[id].parents.push({ // push the parent into the object's parents array
    parent_address: user.parent_address,
    relationship: user.relationship
  });
}

const result = Object.values(unique_map); // get all values in the unique_map
console.log(result);


Дякую, я перевірю деталі, і я дуже існую, щоб прочитати ваш код.
Kathy

О, це суцільно. Деструкція об'єктів у reduceзворотному дзвінку є приємною, але, можливо, трохи важкою для початківця.
TKoL

1
@TKoL спасибі, спробую додати "простішу" версію
Нік Парсонс

1
Простіша версія виглядає чудово!
TKoL

1
Дуже дякую. Я читаю ваш код і легко розумію, особливо на другому фрагменті коду. Вдячний також за відповідь інших членів. Ще раз спасибі, спасибі, хлопці.
Kathy

5

Ви можете зменшити масив і знайти користувача з тим самим ідентифікатором і додати до нього інформацію про батьків.

Якщо користувача не знайдено, додайте нового користувача до набору результатів.

const
    users = [{ id: 1, name: 'John', email: 'johnson@mail.com', age: 25, parent_address: 'USA', relationship: 'mother' }, { id: 1, name: 'John', email: 'johnson@mail.com', age: 25, parent_address: 'Spain', relationship: 'father' }, { id: 2, name: 'Mark', email: 'mark@mail.com', age: 28, parent_address: 'France', relationship: 'father' }],
    grouped = users.reduce((r, { parent_address, relationship, ...user }) => {
        var temp = r.find(q => q.id === user.id );
        if (!temp) r.push(temp = { ...user, parent: []});
        temp.parent.push({ parent_address, relationship });
        return r;
    }, []);

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


2

Такі дані про реструктуризацію є досить поширеними і Array.reduce()розроблені для вирішення цього завдання. Це інший спосіб перегляду речей і вимагає звикання, але після написання коду кілька разів він набуває другого характеру.

reduce() викликається масивом і приймає два параметри:

  1. функція, яка буде викликана для кожного елемента масиву
  2. вихідне значення

Тоді ваша функція викликається для кожного елемента зі початковим значенням для першого запуску або зворотним значенням з попереднього виклику функції для кожного наступного запуску, уздовж елемента масиву, індексується у вихідний масив та вихідний масив, які зменшують () був закликаний (останні два зазвичай ігноруються і рідко потрібні). Він повинен повернути об’єкт або все, що ви створюєте, додавши поточний елемент, і це повернене значення передається наступному виклику вашої функції.

Для таких речей, як правило, у мене є об'єкт зберігати унікальні ключі ( idдля вас), але я бачу, що ви хочете повернути масив. Це один рядок для відображення об’єкта та ключів до масиву, і ефективніше використовувати механізм властивості вбудованого об'єкта замість array.find (), щоб побачити, чи вже ви додали ідентифікатор.

const users = [{
    id: 1,
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    parent_address: 'USA',
    relationship:'mother'
  },
  {
    id: 1,
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    parent_address: 'Spain',
    relationship:'father'
  },
  {
    id: 2,
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    parent_address: 'France',
    relationship:'father'
  }
];

let combined = users.reduce(
  // function called for each element in the array
  (previous, element) => {
    // previous starts out as the empty object we pass as the second argument
    // and will be the return value from this function for every other element
    
    // create an object for the id on our 'previous' object if it doesn't exist,
    // if it does exist we will trust the name, email, and age from the first
    // instance
    previous[element.id] = previous[element.id] || {
      id: element.id,
      name: element.name,
      age: element.age,
      parents: []
    };
    
    // now add parent
    previous[element.id].parents.push({
      parent_address: element.parent_address,
      relationship: element.relationship
    });
    
    // return our updated object, which will be passed to the next call
    // and eventually returned
    return previous;
  },
  {} // initial value is an empty object, no ids yet
);

// transform object into array with elements in order by key
let list = Object.keys(combined).sort().map(key => combined[key]);

console.dir(list);


1

Потрібно повторити двічі, використовуючи поточний метод. Складність становить O (n ^ 2). (для циклу + indexOf)

Кращий спосіб - індексувати масив та використовувати ключ масиву для виявлення дублювання та пошуку.

Наприклад:

const map = {};
users.forEach(user => {
    // Will return undefined if not exist
    let existing = map[user.id];
    if (!existing) {
        // If not exist, create new
        existing = {
            id: user.id,
            ...
            parents: [ {parent_address: user.parent_address, relationship: user.relationship ]
        }
    } else {
        // Otherwise, update only parents field
        // You can add other logic here, for example update fields if duplication is detected.
        existing.parents.push({parent_address: user.parent_address, relationship: user.relationship ]
        });
    }
    map[user.id] = existing;
})
// Convert the object to array
const list = map.values();

Дякую, я перевірю деталі, і я дуже існую, щоб прочитати ваш код.
Kathy

1
const users = [{
    id: 1,
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    parent_address: 'USA',
    relationship:'mother'
  },
  {
    id: 1,
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    parent_address: 'Spain',
    relationship:'father'
  },
  {
    id: 2,
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    parent_address: 'France',
    relationship:'father'
  }
];
const updatedUsers = users.map(user => {
    return {
    id: user.id,
    name: user.name,
    email: user.email,
    age: user.age,
    parent: [{
        relationship: user.relationship,
        parent_address: user.parent_address,
    }]
}
})

const list = updatedUsers.reduce((acc, user) => {
    const findIndex = acc.findIndex(eachUser => eachUser.id === user.id && eachUser.email === user.email);
    if (findIndex < 0) {
        acc.push(user);
        return acc;
    } else {
    acc[findIndex].parent.push(user.parent);
    return acc; 
    }
}, []);
console.log(list)

1
Пояснення було б в порядку. Наприклад, що ти змінив? І чому?
Пітер Мортенсен

1

Ви можете використовувати Mapколекцію для зберігання унікальних предметів і просто заповнити її за допомогою filter:

const unique = new Map(users.map(u=> 
    [u.id, {...u, parent: [...users.filter(f => f.id == u.id)]}]));

console.log(Array.from(unique, ([k, v])=> v)
    .map(s => ( { id: s.id, name: s.name, email: s.email, age:s.age, parent:s.parent })));

const users = [
  {
    id: 1,
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    parent_address: 'USA',
    relationship: 'mother'
  },
  {
    id: 1,
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    parent_address: 'Spain',
    relationship: 'father'
  },
  {
    id: 2,
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    parent_address: 'France',
    relationship: 'father'
  }
];

const unique = new Map(users.map(u=> 
    [u.id, {...u, parent: [...users.filter(f => f.id == u.id)]}]));

console.log(Array.from(unique, ([k, v])=> v).map(s => ( 
    { id: s.id, name: s.name, email: s.email, age:s.age, parent:s.parent })));


0

 const users = [{
    id: 1,
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    parent_address: 'USA',
    relationship:'mother'
  },
  {
    id: 1,
    name: 'John',
    email: 'johnson@mail.com',
    age: 25,
    parent_address: 'Spain',
    relationship:'father'
  },
  {
    id: 2,
    name: 'Mark',
    email: 'mark@mail.com',
    age: 28,
    parent_address: 'France',
    relationship:'father'
  }
];
ids = new Map()
for (const user of users) {
  var newuser;
  if (ids.has(user.id)) {
    newuser = ids.get(user.id);
  } else {
    newuser = {};
    newuser.id = user.id;
    newuser.name = user.name;
    newuser.email = user.email;
    newuser.age = user.age;
    newuser.parent = [];
  }
  relationship = {};
  relationship.parent_address = user.parent_address;
  relationship.relationship = user.relationship;
  newuser.parent.push(relationship)
  ids.set(user.id, newuser);
}
list = [ ...ids.values() ];
list.forEach((u) => {
  console.log(JSON.stringify(u));
});

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.