1

I have an API response that looks something like this:

const apiResponse = {
    entries: [
        {
            title: "Entry Title",
            url_title: "entry-title",
            status: "open",
            created_date: "14 Apr 2017",
            category: {
                cat_name: "Information",
                cat_url_title: "information"
            },
            channel_name: "Entries",
            content: {
                text_position: "textBottomRight",
                large_image: {
                    image: "https://placeimg.com/2732/752/nature/grayscale",
                    width: 2732,
                    height: 752
                },
                small_image: {
                    image: "https://placeimg.com/1500/716/nature/grayscale",
                    width: 1500,
                    height: 716
                },
                content: "A short summary goes *here*.",
                feature_theme: {
                    theme: "themePositive",
                    background_color: "rgb(27, 27, 36)",
                    eyebrow_color: "rgb(255, 255, 255)",
                    headline_color: "rgb(255, 255, 255)",
                    text_color: "rgb(255, 255, 255)",
                    link_color: "rgb(77, 175, 255)"
                },
                enable_favoriting: 0,
                related_article: "",
                continue_link_text: "",
                large_image_height: 0,
                large_image_width: 0,
                small_image_width: 0,
                small_image_height: 0
            },
            id: 614
        }, {
            … more entries
        }
    ]
};

The keys and structure of this response varies slightly depending on the “channel” requested. Currently there are three different channels, and each results just a slightly different structure and a few different keys that might not be present in the other responses. Regardless of the structure of the data source, all responses need to be boiled down to the same format on the front-end.

So I’m wondering, is there recommended way to map values from one object to another when the structures are different?

My initial thought was to create a “templates” for each channel. Something like:

const channelOne = {
    entries: {
        title: 'entries.title',
        slug: 'entries.url_title',
        status: 'entries.status',
        date: 'entries.created_date',
        category: 'entries.category.cat_name',
        name: 'entries.channel_name',
        content: {
            format: 'entries.content.text_position',
            image: {
                large: 'entries.content.large_image.image',
                small: 'entries.content.small_image.image'
            }
        },
        … etc.
    }
};

I would create one of these for each “channel”. Then with each response I would use this template to map the values from the response to the keys in this template. Haven’t really worked through how this would actually work, hence my evening visit to SO.

Any suggestions?

Brandon Durham
  • 7,096
  • 13
  • 64
  • 101

0 Answers0