Перестройка массива 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);
}
Kathy
источник
1
Короче говоря - сделать его проще для читателей будущих - вы хотите объединить parent_addressи relationshipв к parentобъекту, и объединить их , когда повторяющееся имя и адрес электронной почты найдены.
Льюис
2
Как можно взять родительский адрес? Какое свойство следует использовать, чтобы связать их? Заранее спасибо! :)
StepUp
Фрагмент кода в конце не соответствует структуре данных. const list = []Сначала вы говорите , но внизу вы перебираете этот список, очевидно, перебирая user[0]. Ваш пример кода должен быть последовательным.
TKoL
@ Льюис да, я хочу точно так же, как ты упомянул.
Кэти
@SteUp, эти значения извлекаются из моей существующей базы данных и соединяются с таблицей ученика и родителя. Что у меня есть только идентификатор студента в родительской таблице.
Кэти

Ответы:

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);

Ник Парсонс
источник
Спасибо, я проверю детали, и я очень готов прочитать ваш код.
Кэти
О, это солидно. Деструктуризация объекта в reduceобратном вызове хороша, но может быть немного тяжелой для новичка.
TKoL
1
@TKoL спасибо, я постараюсь добавить «более простую» версию
Ник Парсонс
1
Более простая версия выглядит великолепно!
TKoL
1
Огромное спасибо. Я прочитал ваш код и его легко понять, особенно по второму фрагменту кода. Цените также ответы других участников. Еще раз большое спасибо, ребята.
Кэти
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. начальное значение

Затем ваша функция вызывается для каждого элемента с начальным значением для первого запуска или возвращаемым значением из предыдущего вызова функции для каждого последующего запуска, по элементу массива, индексом в исходный массив и исходным массивом lower () был вызван (последние два обычно игнорируются и редко нужны). Он должен возвращать объект или все, что вы создаете, с добавлением текущего элемента, и это возвращаемое значение передается при следующем вызове вашей функции.

Для подобных вещей у меня обычно есть объект для хранения уникальных ключей ( 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();
Энтони Пун
источник
Спасибо, я проверю детали, и я очень готов прочитать ваш код.
Кэти
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));
});

JGFMK
источник