2017-07-26 5 views
1

Ich versuche, zwei Arrays auf einer ID (SourceID) zu fusionieren. Aber versäume es nicht. Das erste Array ist derjenige unter:Merging zwei Arrays auf id - Map-Funktion - Javascript

eventsToBeInserted = [{sourceID: 1, name: "BettyNansen"}, {sourceID: 2, name: "kongenshave"}] 

Dies ist das zweite Array:

images = [{sourceID: 1, images: "Bettynansen.jpg"}, {sourceID: 2, name: "kongenshave.jpg"}] 

Ich suche folgendes zu erhalten:

events = [{sourceID: 1, name: "BettyNansen", images: "Bettynansen.jpg"}, {sourceID: 2, name: "kongenshave", images: "kongenshave.jpg"}] 

Dies ist mein Code:

const eventsToBeInserted = [{ 
 
    sourceID: 1, 
 
    name: "BettyNansen" 
 
}, { 
 
    sourceID: 2, 
 
    name: "kongenshave" 
 
}] 
 

 
const images = [{ 
 
    sourceID: 1, 
 
    images: "Bettynansen.jpg" 
 
}, { 
 
    sourceID: 2, 
 
    name: "kongenshave.jpg" 
 
}] 
 

 
events: !!eventsToBeInserted ? eventsToBeInserted.sourceID.map(sourceID => { 
 
    const event = images.name.find(eventLookup => eventLookup.sourceID === sourceID); 
 
    return [eventsToBeInserted.name, images.name] 
 
}) : []

+0

-Link: https: // Stackoverflow. com/Fragen/35903850/kombinieren-JSON-Arrays-by-Key-Javascript –

Antwort

3

Grundsätzlich, was Sie wollen, ist für jedes Element in eventsToBeInserted, finden Sie alle Bilder, die dazu gehören in der images Array.

Hinweis: In Ihrem images Array, hat das erste Element eine Eigenschaft images und die zweite hat eine Eigenschaft name.

const images = [{ 
    sourceID: 1, 
    images: "Bettynansen.jpg" 
//^
}, { 
    sourceID: 2, 
    name: "kongenshave.jpg" 
//^
}] 

Es scheint logisch, dass beide name verwenden sollten, das ist so was meine Beispiele davon aus unten. Wenn diese Objekte beide images und name verwenden können, sollten Sie die beiden Eigenschaften in der bevorzugten Reihenfolge der Existenz beim Abrufen des Werts ||.

const eventsToBeInserted=[{sourceID:1,name:"BettyNansen"},{sourceID:2,name:"kongenshave"}],images=[{sourceID:1,name:"Bettynansen.jpg"},{sourceID:2,name:"kongenshave.jpg"}]; 
 

 
console.log(
 
    eventsToBeInserted.map(
 
    event => Object.assign({}, event, { 
 
     images: images 
 
     .filter(img => img.sourceID === event.sourceID) 
 
     .map(img => img.name) 
 
    }) 
 
) 
 
)

Wenn jedes Objekt wird immer nur 1 Bild entsprechen, wie pro Ihr Beispiel können Sie find statt filter auf dem images Array verwenden:

Hinweis: Wenn Sie werden immer nur ein Bild haben, es wäre sinnvoller, diese Eigenschaft image anstelle von images zu nennen.

const eventsToBeInserted=[{sourceID:1,name:"BettyNansen"},{sourceID:2,name:"kongenshave"}],images=[{sourceID:1,name:"Bettynansen.jpg"},{sourceID:2,name:"kongenshave.jpg"}]; 
 

 
console.log(
 
    eventsToBeInserted.map(
 
    event => Object.assign({}, event, { 
 
     image: (
 
     images.find(img => img.sourceID === event.sourceID) || {} 
 
    ).name 
 
    }) 
 
) 
 
)

Wenn dieser Vorgang viele Male geschehen muss, wäre effizient images auf einen Hash von sourceID: imageName konvertieren.

const eventsToBeInserted=[{sourceID:1,name:"BettyNansen"},{sourceID:2,name:"kongenshave"}],images=[{sourceID:1,name:"Bettynansen.jpg"},{sourceID:2,name:"kongenshave.jpg"}]; 
 

 
const imagesHash = images.reduce((hash, img) => { 
 
    hash[img.sourceID] = img.name; 
 
    return hash; 
 
}, {}); 
 

 
console.log(
 
    eventsToBeInserted.map(
 
    event => Object.assign({}, event, { 
 
     image: imagesHash[event.sourceID] 
 
    }) 
 
) 
 
)

Schließlich Ihrer Umgebung vorausgesetzt, es erlaubt, können Sie object spread die Syntax zu vereinfachen:

const eventsToBeInserted=[{sourceID:1,name:"BettyNansen"},{sourceID:2,name:"kongenshave"}],images=[{sourceID:1,name:"Bettynansen.jpg"},{sourceID:2,name:"kongenshave.jpg"}]; 
 

 
const imagesHash = images.reduce((hash, img) => { 
 
    hash[img.sourceID] = img.name; 
 
    return hash; 
 
}, {}); 
 

 
console.log(
 
    eventsToBeInserted.map(
 
    event => ({ 
 
     ...event, 
 
     image: imagesHash[event.sourceID] 
 
    }) 
 
) 
 
)

+0

Danke @ nem035. Schätzen Sie die gründliche und detaillierte Erklärung! –

+0

@BjarkeAndersen kein Problem, gerne amigo :) – nem035