How do I get information from one json object with the key of another json object?

Question

I need to get the data from an array of json objects using the key of another array of json objects.

Specifically, what I need to do is get the name from the membership using the data stored in local storage (membershipSubscriptions.membership.id)

Basket Data

Data for the items in the basket - this is an array of objects from local storage

var basketContentsObject = jQuery.parseJSON(localStorage.getItem('localBasket'));
var membershipSubscriptions =  basketContentsObject.data.membershipSubscriptions;

{
    autoRenew: true
    discount: 0
    expiryDate: "2021-05-03T00:00:00"
    id: "3807760AVVTBVCNPQVDKKCGMRBLGLCGRP"
    isRenewal: false
    membership: {
        id: "7ALGBGVBCLVTGKNVNRTJPVKGBSPNGQPMK"
    }
    price: 47
    startDate: "2020-05-04T00:00:00"
    total: 47
}

Membership Data

json from the API that contains more information of this item - this id also an array of objects

$.getJSON( cache_url + "memberships.json", function(membership) {
    console.log(ms);
});

{
    "description": "Patrons - paying £250 annually",
    "htmlDescription": "<div id>\r\n\t<h2>Patron £250 -  Paying annually</h2>\r\n</div>",
    "id": "7ALGBGVBCLVTGKNVNRTJPVKGBSPNGQPMK",
    "imageUrl": "",
    "name": "Patrons - £250 Yearly",
    "thumbnailUrl": "",
    "attribute_Type": "Patrons"
}

Answer 1

Here I am mapping the data from the api and join the keys from the object in local storage that has the same id as the current object from the api.

 api.map((obj) => ({ ...obj, ...ls.find(({membership: {id}}) => id === obj.id)}))

There are two things you should look up if you don't know about them. Object Deconstruction and the Spread Operator . Next to that we have map and find that might be worth a look.

Here is a full working example:

 const ls = [{ autoRenew: true, discount: 0, expiryDate: "2021-05-03T00:00:00", id: "3807760AVVTBVCNPQVDKKCGMRBLGLCGRP", isRenewal: false, membership: { id: "7ALGBGVBCLVTGKNVNRTJPVKGBSPNGQPMK", }, price: 47, startDate: "2020-05-04T00:00:00", total: 47, }] const api = [{ attribute_Type: "Patrons", description: "Patrons", id: "7ALGBGVBCLVTGKNVNRTJPVKGBSPNGQPMK", imageUrl: "", name: "Patrons", thumbnailUrl: "", }] console.log( api.map((obj) => ({apiID: obj.id, ...obj, ...ls.find(({ membership: {id} }) => id === obj.id) })) )

But you could also do it the other way around of course.

 const ls = [{ autoRenew: true, discount: 0, expiryDate: "2021-05-03T00:00:00", id: "3807760AVVTBVCNPQVDKKCGMRBLGLCGRP", isRenewal: false, membership: { id: "7ALGBGVBCLVTGKNVNRTJPVKGBSPNGQPMK", }, price: 47, startDate: "2020-05-04T00:00:00", total: 47, }] let api = [{ attribute_Type: "Patrons", description: "Patrons", id: "7ALGBGVBCLVTGKNVNRTJPVKGBSPNGQPMK", imageUrl: "", name: "Patrons", thumbnailUrl: "", }] console.log( ls.map((obj) => ({basketID: obj.id, ...obj, ...api.find(({ id }) => id === obj.membership.id) })) )

Answer 2

You need to store the membership ID in a variable and then iterate through the membership data looking for a coincidence in the ID field.

It could look something like:

const member = "3807760AVVTBVCNPQVDKKCGMRBLGLCGRP";
const memberData = membershipData.find(item => item.id === member);

What this will do is iterate the Membership Data array of objects and, for each object in the array, check if the id property matches the member ID you are looking for. If a match is found, the entire object will be returned and will be accessible in the memberData variable. If no match is found, it will return null .

If there may be more than one coincidence and you need all of them, use filter instead of find , in which case memberData will be an array.

Hope this helps.