コンポーネント内で使用するapiエンドポイントからのjson形式の変更

Question

私は、wordpressエンドポイントからのイベントデータを使用する基本的な反応ネイティブアプリを持っています。

私の下のjsonは、私のワードプレス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> 
    ); 
    } 
} 

マイイベント減速が成功した状態を返します。

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

マイJSONフォーマット：私のページコンポーネントで

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

     default: 
      return state; 
    } 
} 

I mapStateToPropsこれが必要です（開始日とタイトル）：

{{ 
         "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 
} 

Answer 1

は、それがAPIから来ているとの情報を受信して​​、あなたのユースケースに対応するためにReduxの中でそれを格納する方が良いでしょう。実際の応答を操作することは、いいえとみなされるべきです。

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オブジェクト内など、title、endDate、startDate含め、そのidに基づいて、各eventを格納検討することができます。次に、connectカレンダーコンポーネントの場合は、eventsをreduxにマップして、そのユースケース専用にフォーマットされた新しいオブジェクトを作成できます。

Answer 2

あなたがワードプレスの受信からあるデータは、私が知っている可能性があり、その中に詳細をたくさん持っています"キー"の値は、この巨大なデータの中で、のようにマッピングされ、キー、カラー、および選択されたカラーを含むドットオブジェクトとなりますか？あなたがこれを最もよく行うことができる場所を知るために、reduxを使ってワードプレスエンドポイント経由で取り出したデータを保存していますか？

私たちはあなたが探していることを知ったので、私たちがこれを達成する方法の下にいくつかのコードを見てみましょう。 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);