Searching complex JSON data for matching key value

Question

I'm having trouble wrapping my head around this problem. I've searched and found a few answers to similar questions, but the JSON data in all the examples was too simple. Mine is more complex.

I have an array of numbers which I am looping through. For each loop, I need to match the number against my JSON data to find matching entries and then get specific key values from that entry.

This is an example of my array:

results = [377, 375, 373, 353, 355]

This is an example of my JSON data:

{
    "count": 10,
    "posts": [
        {
            "title": "Title of Post",
            "attachments": [
                {
                    "id": 377,
                    "images": {
                        "full": {
                            "url": "http://example.com/images/foo.jpg",
                            "width": 800,
                            "height": 600
                        },
                        "thumbnail": {
                            "url": "http://example.com/images/foo_thumb.jpg",
                            "width": 150,
                            "height": 150
                        }
                    }
                },
                {
                    "id": 355,
                    "images": {
                        "full": {
                            "url": "http://example.com/images/bar.jpg",
                            "width": 800,
                            "height": 600
                        },
                        "thumbnail": {
                            "url": "http://example.com/images/bar_thumb.jpg",
                            "width": 150,
                            "height": 150
                        }
                    }
                }
            ]
        },
        // 9 more posts...
    ]
}

For each number in results, I need to match it against each posts.attachments.id. So, in this case 377 and 355 are matches. For all matched attachments, I need to grab its full and thumbnail URLs.

Like I said, I've found possible solutions for this, but the example data is only 1-2 levels deep. I can't quite wrap my head around the loops necessary for this particular scenario.

Answer 1

var urls = [];
results.forEach(function(result){
    posts.forEach(function(post){
        post.attachments.every(function(attachment){
            if(result === attachment.id) {
                urls.push({
                    id: attachment.id,
                    full: attachment.images.full.url,
                    thumbnail: attachment.images.thumbnail.url
                });
                return false;
            }
            return true;
        });
    });
});

A lot of nested foreach loops here, which you should always keep to a minimum, but it all boils down to how big your data is and will be in the future.

the forEach is a native javascript function and imo makes it way more readable then traditional for loops. The every method lets you break the loop by returning false so you don't have to traverse the whole list unless matching on the last element in the array.

Answer 2

var urls = [];
var att = posts.attachments;
for (var i = 0; i < results.length; i++) {
    var id = results[i];
    for (var j = 0; j < att.length; j++) {
        if (att[j].id == id) {
            urls.push({
                id: id,
                full: att[j].images.full.url,
                thumbnail: att[j].images.thumbnail.url
            });
            break;
        }
    }
}