更改来自api端点的json格式以在组件

时间：2017-12-29 15:05:46

标签： javascript json react-native

我有一个基本的react-native应用程序，它使用来自wordpress端点的事件数据。

下面的json来自我的wordpress api，如何更改结构以适应我的日历组件？

最适合在我的应用中执行此操作的位置？我在app.js中发送了一个动作：

  eventsFetchData(
    "http://wordpress.rguc.co.uk/index.php/wp-json/tribe/events/v1/events"
  )
);

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <AppNavigation />
      </Provider>
    );
  }
}

我的事件减少器返回成功状态：

export function events(state = [], action) {
    switch (action.type) {
        case 'EVENTS_FETCH_DATA_SUCCESS':
                return {
        ...action.events
      };

        default:
            return state;
    }
}

我的页面组件中的mapStateToProps：

const mapStateToProps = state => {
    return {
        events: state.events,
    };
};

我的json格式必须是这个（startdate和title）：

{{
                        "2012-05-08(startdate)": {
                            dots: [
                                {
                                    key: "vacation(title)",
                                    color: "blue",
                                    selectedDotColor: "white"
                                },
                                {
                                    key: "massage",
                                    color: "red",
                                    selectedDotColor: "white"
                                }
                            ],
                            selected: true
                        },
                        "2012-05-09": {
                            dots: [
                                {
                                    key: "vacation",
                                    color: "blue",
                                    selectedColor: "red"
                                },
                                {
                                    key: "massage",
                                    color: "red",
                                    selectedColor: "blue"
                                }
                            ],
                            disabled: true
                        }
                    }}

这是我目前的数据，我需要将title和startdate拉为上述格式：

{
   "events":[
      {
         "id":521,
         "global_id":"wordpress.rguc.co.uk?id=521",
         "global_id_lineage":[
            "wordpress.rguc.co.uk?id=521"
         ],
         "author":"1",
         "status":"publish",
         "date":"2017-12-14 12:23:56",
         "date_utc":"2017-12-14 12:23:56",
         "modified":"2017-12-14 12:23:56",
         "modified_utc":"2017-12-14 12:23:56",
         "url":"http:\/\/wordpress.rguc.co.uk\/event\/lunchtime-lecture\/",
         "rest_url":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/events\/521",
         "title":"Lunchtime Lecture",
         "description":"<p>Mr Rehman<br \/>\nIschaemic Limb<\/p>",
         "excerpt":"",
         "image":false,
         "all_day":false,
         "start_date":"2018-01-02 09:30:00",
         "start_date_details":{
            "year":"2018",
            "month":"01",
            "day":"02",
            "hour":"09",
            "minutes":"30",
            "seconds":"00"
         },
         "end_date":"2018-01-02 10:30:00",
         "end_date_details":{
            "year":"2018",
            "month":"01",
            "day":"02",
            "hour":"10",
            "minutes":"30",
            "seconds":"00"
         },
         "utc_start_date":"2018-01-02 09:30:00",
         "utc_start_date_details":{
            "year":"2018",
            "month":"01",
            "day":"02",
            "hour":"09",
            "minutes":"30",
            "seconds":"00"
         },
         "utc_end_date":"2018-01-02 10:30:00",
         "utc_end_date_details":{
            "year":"2018",
            "month":"01",
            "day":"02",
            "hour":"10",
            "minutes":"30",
            "seconds":"00"
         },
         "timezone":"Europe\/London",
         "timezone_abbr":"GMT",
         "cost":"",
         "cost_details":{
            "currency_symbol":"",
            "currency_position":"prefix",
            "values":[

            ]
         },
         "website":"",
         "show_map":false,
         "show_map_link":false,
         "hide_from_listings":false,
         "sticky":false,
         "featured":false,
         "categories":[
            {
               "name":"3rd Year - Firm 1",
               "slug":"3rd-year-firm-1",
               "term_group":0,
               "term_taxonomy_id":59,
               "taxonomy":"tribe_events_cat",
               "description":"",
               "parent":0,
               "count":2,
               "filter":"raw",
               "id":59,
               "urls":{
                  "self":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/categories\/59",
                  "collection":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/categories"
               }
            }
         ],
         "tags":[

         ],
         "venue":{
            "id":523,
            "author":"1",
            "status":"publish",
            "date":"2017-12-14 12:23:56",
            "date_utc":"2017-12-14 12:23:56",
            "modified":"2017-12-14 12:23:56",
            "modified_utc":"2017-12-14 12:23:56",
            "url":"http:\/\/wordpress.rguc.co.uk\/venue\/lecture-theatre\/",
            "venue":"Lecture Theatre",
            "show_map":true,
            "show_map_link":true,
            "global_id":"wordpress.rguc.co.uk?id=523",
            "global_id_lineage":[
               "wordpress.rguc.co.uk?id=523"
            ]
         },
         "organizer":[

         ]
      },
      {
         "id":518,
         "global_id":"wordpress.rguc.co.uk?id=518",
         "global_id_lineage":[
            "wordpress.rguc.co.uk?id=518"
         ],
         "author":"1",
         "status":"publish",
         "date":"2017-12-14 12:11:42",
         "date_utc":"2017-12-14 12:11:42",
         "modified":"2017-12-22 10:05:48",
         "modified_utc":"2017-12-22 10:05:48",
         "url":"http:\/\/wordpress.rguc.co.uk\/event\/another-one\/",
         "rest_url":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/events\/518",
         "title":"another one",
         "description":"",
         "excerpt":"",
         "image":false,
         "all_day":true,
         "start_date":"2018-01-31 00:00:00",
         "start_date_details":{
            "year":"2018",
            "month":"01",
            "day":"31",
            "hour":"00",
            "minutes":"00",
            "seconds":"00"
         },
         "end_date":"2018-01-31 23:59:59",
         "end_date_details":{
            "year":"2018",
            "month":"01",
            "day":"31",
            "hour":"23",
            "minutes":"59",
            "seconds":"59"
         },
         "utc_start_date":"2018-01-31 00:00:00",
         "utc_start_date_details":{
            "year":"2018",
            "month":"01",
            "day":"31",
            "hour":"00",
            "minutes":"00",
            "seconds":"00"
         },
         "utc_end_date":"2018-01-31 23:59:59",
         "utc_end_date_details":{
            "year":"2018",
            "month":"01",
            "day":"31",
            "hour":"23",
            "minutes":"59",
            "seconds":"59"
         },
         "timezone":"Europe\/London",
         "timezone_abbr":"GMT",
         "cost":"",
         "cost_details":{
            "currency_symbol":"",
            "currency_position":"prefix",
            "values":[

            ]
         },
         "website":"",
         "show_map":true,
         "show_map_link":true,
         "hide_from_listings":false,
         "sticky":false,
         "featured":false,
         "categories":[
            {
               "name":"3rd Year - Firm 1",
               "slug":"3rd-year-firm-1",
               "term_group":0,
               "term_taxonomy_id":59,
               "taxonomy":"tribe_events_cat",
               "description":"",
               "parent":0,
               "count":2,
               "filter":"raw",
               "id":59,
               "urls":{
                  "self":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/categories\/59",
                  "collection":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/categories"
               }
            }
         ],
         "tags":[
            {
               "name":"calendarTwo",
               "slug":"calendartwo",
               "term_group":0,
               "term_taxonomy_id":58,
               "taxonomy":"post_tag",
               "description":"",
               "parent":0,
               "count":1,
               "filter":"raw",
               "id":58,
               "urls":{
                  "self":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/tags\/58",
                  "collection":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/tags"
               }
            }
         ],
         "venue":[

         ],
         "organizer":[

         ]
      },
      {
         "id":516,
         "global_id":"wordpress.rguc.co.uk?id=516",
         "global_id_lineage":[
            "wordpress.rguc.co.uk?id=516"
         ],
         "author":"2",
         "status":"publish",
         "date":"2017-12-14 12:00:37",
         "date_utc":"2017-12-14 12:00:37",
         "modified":"2017-12-22 10:05:28",
         "modified_utc":"2017-12-22 10:05:28",
         "url":"http:\/\/wordpress.rguc.co.uk\/event\/test-event\/",
         "rest_url":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/events\/516",
         "title":"test event",
         "description":"<p>test event<\/p>",
         "excerpt":"",
         "image":false,
         "all_day":false,
         "start_date":"2018-02-14 08:00:00",
         "start_date_details":{
            "year":"2018",
            "month":"02",
            "day":"14",
            "hour":"08",
            "minutes":"00",
            "seconds":"00"
         },
         "end_date":"2018-04-24 17:00:00",
         "end_date_details":{
            "year":"2018",
            "month":"04",
            "day":"24",
            "hour":"17",
            "minutes":"00",
            "seconds":"00"
         },
         "utc_start_date":"2018-02-14 08:00:00",
         "utc_start_date_details":{
            "year":"2018",
            "month":"02",
            "day":"14",
            "hour":"08",
            "minutes":"00",
            "seconds":"00"
         },
         "utc_end_date":"2018-04-24 16:00:00",
         "utc_end_date_details":{
            "year":"2018",
            "month":"04",
            "day":"24",
            "hour":"16",
            "minutes":"00",
            "seconds":"00"
         },
         "timezone":"Europe\/London",
         "timezone_abbr":"GMT",
         "cost":"",
         "cost_details":{
            "currency_symbol":"",
            "currency_position":"prefix",
            "values":[

            ]
         },
         "website":"",
         "show_map":true,
         "show_map_link":true,
         "hide_from_listings":false,
         "sticky":false,
         "featured":false,
         "categories":[

         ],
         "tags":[
            {
               "name":"tester",
               "slug":"tester",
               "term_group":0,
               "term_taxonomy_id":57,
               "taxonomy":"post_tag",
               "description":"",
               "parent":0,
               "count":1,
               "filter":"raw",
               "id":57,
               "urls":{
                  "self":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/tags\/57",
                  "collection":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/tags"
               }
            }
         ],
         "venue":[

         ],
         "organizer":[

         ]
      }
   ],
   "rest_url":"http:\/\/wordpress.rguc.co.uk\/wp-json\/tribe\/events\/v1\/events\/?page=1&per_page=10&start_date=2017-12-28 23:59:00&end_date=2019-12-29 14:52:47",
   "total":"3",
   "total_pages":1
}

2 个答案:

答案 0 :(得分：0)

你来自wordpress接收的数据中有很多细节，我可以知道＆＃34; 键＆＃34;您正在查看这个巨大数据的值，以映射为包含key，color和selectedColor 的点对象？要知道在哪里可以做到这一点，您是否使用redux存储通过word press end-point获取的数据？

现在我们知道您在寻找什么，让我们看看下面的代码如何实现这一目标。这里resultObj包含输出格式。

// here is the code
// Assuming the data received from wordpress is stored in a object called wordpressObj. 
// we loop over the events array of this object, extract start date, then add all the dots dor this start date into this array.
var resultObj = {};
wordpressObj.events.map((eachObj) => {

   startDate = eachObj.start_date_details.year+"-"eachObj.start_date_details.month+"-"eachObj.start_date_details.day;

   if(!resultObj.hasOwnProperty(startDate))
   {
      resultObj.startDate.dots = [];
   }
   tempObj = {};
   tempObj.key = eachObj.title;
   tempObj.color = "blue";
   tempObj.selectedDotColor = "white";

   resultObj.startDate.dots.push(tempObj);

   //selected and deselected logic to come here , for now setting both of them as true
   resultObj.startDate.selected = true;
   resultObj.startDate.disabled = true;
});

console.log(resultObj);

答案 1 :(得分：0)

在我看来，最好是从API接收信息，然后将其存储在redux中以适应您的用例。操纵实际的反应应该被视为禁忌。

当您说imageView时，我假设您正在使用fragment。如果你不是，你可以考虑使用它，因为它在这种情况下会有所帮助。我会将您的window.addEventListener('OnRewards', (e: Event) => { const detail = (<CustomEvent>e).detail; ... }); 数组传递到您的dispatch并将其映射，将您想要的数据存储在减速器中的对象地图中。 

redux

我已按照日历组件所需格式的方向格式化上述内容，但您可以考虑根据events存储每个action，包括case FETCH_DATA_SUCCEEDED: { const events = { ...state.events }; action.events.map(event => { const { year, month, day } = event.start_date_details; const startDate = `${year}-${month}-${day}`; events[startDate] = { dots: [ { key: event.title, // add your fancy calendar styles } ], selected: true, disabled: false }; }); return { ...state, events }; } ，event ，每个id对象中的startDate等。然后，当您endDate日历组件时，您可以映射title中的event，创建专门针对该用例格式化的新对象。

相关问题
最新问题