React Native Structure an Object from Available Data

Question

I am using a library that has a specific object structure and it looks like this:

const libraryTemplateData = [
    {
        eventContainerStyle: {
            style: {
                opacity: 1,
            },
        },
        title: {
            content: "Title Item #1",
        },
        description: {
            content: "Description Item #2",
        },
        time: {
            content: "Time Item #2",
            style: { opacity: 1 },
        },
        icon: {
            style: {
                opacity: 1,
            },
        },
    },
    {
        title: {
            content: "Title Item #2",
        },
        description: {
            content: "Description Item #2",
        },
        time: {
            content: "Time Item #2",
        },
    },
    {
        title: {
            content: "Title Item #3",
        },
        description: {
            content: "Description #3",
        },
        time: {
            content: "Time Item #3",
        },
    },

and so on..

I also have a data that I receive from API call (can't restructure it on a DB level to match the libraryTemplateData):

{
"data": [
    {
        "ID": "59732379",
        "TIME": "16:00",
        "TITLE": "Item Title #1",
        "DESCRIPTION": "Description Item #1"
    },
    {
        "ID": "59732361",
        "TIME": "18:00",
        "TITLE": "Title Item #2",
        "DESCRIPTION": "Description Item #2"
    }
],
"result": 0,
"resultdescription": "OK"

}

and so on..

How to map data to the type of object in libraryTemplateData? I also need to change the properties in data[0] as you can see in libraryTemplateData[0]. The opacity has to be set to achieve the "light up" effect. All elements after data[0] will be opacity:0 by default.

vuongvu · Accepted Answer · 2021-02-16 08:06:06Z

1

you can just use a simple map to achieve it:

const libraryTemplateData = data.map((item, index) => ({
  eventContainerStyle: {
    style: {
      opacity: index === 0 ? 1 : 0,
    },
  },
  title: {
    content: item.TITLE,
  },
  description: {
    content: item.DESCRIPTION,
  },
  time: {
    content: item.TIME,
    style: {
      opacity: index === 0 ? 1 : 0,
    },
  },
  icon: {
    style: {
      opacity: index === 0 ? 1 : 0,
    },
  },
}));

answered Feb 16, 2021 at 8:06

vuongvu

8497 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

denistepp Over a year ago

I was just about to edit the question of how I did it, but you were faster... :) I used a function and put a const inside of it and it didn't quite work, but still showed the items. Your solution is perfect, thank you!

Collectives™ on Stack Overflow

React Native Structure an Object from Available Data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related