Struktura struktury tablicy JavaScript

16

Mam tablicę z adresami uczniów i rodziców.

Na przykład,

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

Próbuję sformatować to w następujący sposób.

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

Do tej pory próbowałem w następujący sposób. Nie jestem pewien, czy to właściwa droga, czy nie.

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
źródło
1
Tak w skrócie - aby ułatwić czytelnikom przyszłych - chcesz połączyć parent_addressi relationshipw do parentobiektu i połączyć je, gdy duplikat nazwa i adres e-mail znajdują.
Lewis,
2
Jak można wziąć adres rodzica? Jaką właściwość należy wykorzystać do ich powiązania? Z góry dzięki! :)
StepUp
Fragment kodu na końcu nie pasuje do struktury danych. Mówisz const list = []na początku, ale na dole iterujesz tę listę, najwyraźniej przez iterację user[0]. Twój przykładowy kod powinien być spójny.
TKoL
@ Lewis tak, chcę dokładnie tak jak wspomniałeś.
kathy
@SteUp, te wartości są pobierane z mojej istniejącej bazy danych i łączą się z tabelą ucznia i rodzica. Co mam tylko identyfikator studenta w tabeli nadrzędnej.
kathy

Odpowiedzi:

12

Jednym podejściem byłoby użycie .reduce()obiektu jako akumulatora. Dla każdego identyfikatora możesz zapisać powiązany obiekt z tablicą nadrzędną, do której możesz dołączyć w .reduce()wywołaniu zwrotnym za każdym razem, gdy napotkasz nowy obiekt o tym samym identyfikatorze. Następnie, aby uzyskać tablicę obiektów ze swojego obiektu, możesz wywołaćObject.values() na nim

Zobacz przykład poniżej:

const users = [{ id: 1, name: 'John', email: '[email protected]', age: 25, parent_address: 'USA', relationship: 'mother' }, { id: 1, name: 'John', email: '[email protected]', age: 25, parent_address: 'Spain', relationship: 'father' }, { id: 2, name: 'Mark', email: '[email protected]', 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);

Ponieważ wspomniałeś, że jesteś nowy w JS, może być łatwiej zrozumieć w bardziej imperatywny sposób (szczegóły w komentarzach do kodu):

const users = [{ id: 1, name: 'John', email: '[email protected]', age: 25, parent_address: 'USA', relationship: 'mother' }, { id: 1, name: 'John', email: '[email protected]', age: 25, parent_address: 'Spain', relationship: 'father' }, { id: 2, name: 'Mark', email: '[email protected]', 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);

Nick Parsons
źródło
Dzięki, sprawdzę szczegóły i bardzo istniałem, by przeczytać Twój kod.
kathy
Och, to jest solidne. Destrukcja obiektu w reducewywołaniu zwrotnym jest ładna, ale dla początkującego może być nieco ciężka.
TKoL,
1
@TKoL dzięki, postaram się dodać „prostszą” wersję
Nick Parsons,
1
Prostsza wersja wygląda świetnie!
TKoL,
1
Dziękuję bardzo. Czytam twój kod i łatwo go zrozumieć, szczególnie na drugim fragmencie kodu. Doceń także odpowiedź innych członków. Jeszcze raz bardzo wam dziękuję.
kathy
5

Możesz zmniejszyć tablicę i wyszukać użytkownika o tym samym identyfikatorze i dodać do niego informacje nadrzędne.

Jeśli użytkownik nie zostanie znaleziony, dodaj nowego użytkownika do zestawu wyników.

const
    users = [{ id: 1, name: 'John', email: '[email protected]', age: 25, parent_address: 'USA', relationship: 'mother' }, { id: 1, name: 'John', email: '[email protected]', age: 25, parent_address: 'Spain', relationship: 'father' }, { id: 2, name: 'Mark', email: '[email protected]', 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; }

Nina Scholz
źródło
2

Restrukturyzacja takich danych jest dość powszechna i Array.reduce() jest przeznaczona do tego zadania. Jest to inny sposób przeglądania rzeczy i wymaga przyzwyczajenia się, ale po napisaniu kodu kilka razy staje się drugą naturą.

reduce() jest wywoływany w tablicy i przyjmuje dwa parametry:

  1. funkcja, która zostanie wywołana dla każdego elementu w tablicy
  2. wartość początkowa

Twoja funkcja jest następnie wywoływana dla każdego elementu z wartością początkową dla pierwszego uruchomienia lub wartością zwracaną z poprzedniego wywołania funkcji dla każdego kolejnego uruchomienia, wzdłuż elementu tablicy, indeksu do oryginalnej tablicy i oryginalnej tablicy, która redukuje () został wywołany (dwa ostatnie są zwykle ignorowane i rzadko potrzebne). Powinien zwrócić obiekt lub cokolwiek, co budujesz z dodanym bieżącym elementem, a ta zwracana wartość zostanie przekazana do następnego wywołania twojej funkcji.

W przypadku takich rzeczy zwykle mam obiekt, aby zachować unikalne klucze ( iddla ciebie), ale widzę, że chcesz zwrócić tablicę. To jedna linia do odwzorowania obiektu i kluczy na tablicę, a bardziej efektywne jest użycie wbudowanego mechanizmu właściwości obiektu zamiast array.find (), aby sprawdzić, czy już dodałeś identyfikator.

const users = [{
    id: 1,
    name: 'John',
    email: '[email protected]',
    age: 25,
    parent_address: 'USA',
    relationship:'mother'
  },
  {
    id: 1,
    name: 'John',
    email: '[email protected]',
    age: 25,
    parent_address: 'Spain',
    relationship:'father'
  },
  {
    id: 2,
    name: 'Mark',
    email: '[email protected]',
    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);

Jason Goemaat
źródło
1

Musisz powtórzyć dwa razy przy użyciu bieżącej metody. Złożoność wynosi O (n ^ 2). (dla Loop + indexOf)

Lepszym sposobem jest indeksowanie tablicy i użycie klucza tablicy do wykrywania i wyszukiwania duplikacji.

Na przykład:

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();
Anthony Poon
źródło
Dzięki, sprawdzę szczegóły i bardzo istniałem, by przeczytać Twój kod.
kathy
1
const users = [{
    id: 1,
    name: 'John',
    email: '[email protected]',
    age: 25,
    parent_address: 'USA',
    relationship:'mother'
  },
  {
    id: 1,
    name: 'John',
    email: '[email protected]',
    age: 25,
    parent_address: 'Spain',
    relationship:'father'
  },
  {
    id: 2,
    name: 'Mark',
    email: '[email protected]',
    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)
Maharjun M.
źródło
1
Wytłumaczenie byłoby w porządku. Np. Co zmieniłeś? I dlaczego?
Peter Mortensen,
1

Możesz użyć Mapkolekcji do przechowywania unikalnych przedmiotów i po prostu wypełnić ją, używając 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: '[email protected]',
    age: 25,
    parent_address: 'USA',
    relationship: 'mother'
  },
  {
    id: 1,
    name: 'John',
    email: '[email protected]',
    age: 25,
    parent_address: 'Spain',
    relationship: 'father'
  },
  {
    id: 2,
    name: 'Mark',
    email: '[email protected]',
    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 })));

StepUp
źródło
0

 const users = [{
    id: 1,
    name: 'John',
    email: '[email protected]',
    age: 25,
    parent_address: 'USA',
    relationship:'mother'
  },
  {
    id: 1,
    name: 'John',
    email: '[email protected]',
    age: 25,
    parent_address: 'Spain',
    relationship:'father'
  },
  {
    id: 2,
    name: 'Mark',
    email: '[email protected]',
    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
źródło