Сопоставить результаты OData в компоненты

Question

Я пытаюсь завершить заполнение списка результатами службы OData, я добавил в свой проект следующую библиотеку Rest: https://github.com/javorosas/react-native-rest-client

Я создал класс клиента следующим образом:

 import RestClient from 'react-native-rest-client';

    export default class ServiceOrdersOData extends RestClient {
      constructor () {
           super('https://my000000.sapbydesign.com/sap/byd/odata/analytics/ds/Crmsoscb.svc', {
      headers: {

        Authorization: 'Basic X1NFSURPUjpJbmljaW8wMQ=='

      },
    });
  }
       getServiceOrdersOData () {
        // Send the url query as an object
        return this.GET('/Crmsoscb');

       }

    };

Это работает просто отлично, теперь на реальном экране я добавил кнопку и обработал ее событие onPress.

CallOData(){

        const api = new ServiceOrdersOData();
        const odataValues = api.getServiceOrdersOData();
        console.log(odataValues);
    }

Если я проверяю консоль, я вижу, что odataValues ​​возвращает все записи из службы OData, которая, если она выполняется в браузере, имеет следующий формат:

{
    "d": {
        "results": [
            {
                "__metadata": {
                    "uri": "https://my000000.sapbydesign.com/sap/byd/odata/analytics/ds/Crmsoscb.svc/Crmsoscb('.7~0000000000011DDFBEA73CE3794B5D1A')",
                    "type": "CrmsoscbSvc.CrmsoscbType"
                },
                "ID": ".7~0000000000011DDFBEA73CE3794B5D1A",
                "C_DbaServiceOrg": "00000000-0001-1DDF-B9FF-7D69E6266BF2",
                "C_DicIncCataId": "0000000000000000010010000",
                "C_DicIncCatId": "0000000000000000010014172",
                "C_DocId": "00000000000000000000000000000000001",
                "C_DocPostDate": "/Date(1290729600000)/",
                "C_DocSAgCorLc": "3",
                "C_DocUuid": "00000000-0001-1DDF-BEA7-3CE3794B5D1A",
                "C_DpyBuyerCntry": "US",
                "C_DpyBuyerPoscd": "14204",
                "C_DpyBuyerPty": "00000000-0001-1DDF-BA84-90748A78DCE3",
                "C_DpyBuyerRegn": "NY",
                "C_DpyBuyAbc": "A",
                "C_DpyBuyCity": "Buffalo",
                "C_DpyBuyInds": "42",
                "C_DpyBuyIndscsy": "0005",
                "C_DpyBuyNieid": "",
                "C_DpyProcPty": "00000000-0001-1DEF-BAD7-B58B002BEC36",
                "C_DpySalesUnit": "00000000-0001-1DDF-B9FF-7D69E6266BF2",
                "C_DpySrvsupTeam": "00000000-0001-1DDF-B9FF-7D69E6266BF2",
                "C_DpySrvExTeam": "00000000-0001-1DDF-B9FF-7D69E6266BF2",
                "C_DpySrvPerform": "00000000-0001-1DEF-BAD7-B5BC90EE6C36",
                "C_DroMatProcCat": "00000000-0001-1DEF-BA9F-2DABDB415385",
                "C_DroMatProdTy": "1",
                "C_DroRefoIndmat": "00000000-0001-1DEF-BAEB-6DD8248A2BA6",
                "C_DroRefoMat": "00000000-0001-1DEF-BAEA-3DA13AD047A6",
                "C_DsrProcCataid": "0000000000000000010010000",
                "C_DsrProcCatid": "0000000000000000010014000",
                "C_DsrSrvPrior": "3",
                "C_DsrWarranty": null,
                "C_DttInitMonth": "--11",
                "C_DttInitQuartr": "--Q4",
                "C_DttInitRecDt": "/Date(1290729600000)/",
                "C_DttInitWeekdy": "5",
                "C_DttInitYear": "2010",
                "C_DttInitYrmon": "2010-11",
                "C_DttInitYrquar": "2010-Q4",
                "C_DttInitYrweek": "2010-W47",
                "T_DocName": "Combi 75: Below average heat output",
                "NodeId": "0000000000011DDFBEA73CE3794B5D1A",
                "Count": 1
            }
        ]
    }
}

Что я хочу сейчас сделать, так это заполнить список на экране этими записями, скажем, с помощью T_DocName и C_DocId.

Я знаю о функции с именем map, но не знаю, как ее использовать в данном конкретном случае.

Заранее спасибо за помощь!

Редактировать:

Итак, я попробовал пару рекомендаций, но когда я пытаюсь получить odataValues.d.results, это выдает мне следующую ошибку: Cannot read property 'results' of undefined

Я полагаю, это связано с тем, что возвращаемый ответ - это не коллекция, а нечто, называемое Обещанием? Я прилагаю скриншот того, как выглядит console.log самого возврата:

Как вы можете видеть там, есть странная структура, и мой ответ содержится в:

_55:
d:{results: Array(291)}

Есть предложения?

Еще раз спасибо!

Answer 1

[StartCaveat]

Вам нужно взглянуть на MDN для карты: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map на сайте есть потрясающее количество информации для всего JavaScript и многое другое!

[EndCaveat]

Чтобы использовать карту, вы должны сначала убедиться, что нужные результаты будут внутри массива, вы можете сделать это:

if(typeof(odataValues.d.results) != "undefined"){
}

Теперь, когда мы знаем, что можем получить доступ к значению, и оно, фактически, существует в области действия, мы можем использовать карту!

  odataValues.d.results.map(item => {
    console.log("DocName", item.T_DocName);
    console.log("CDocId", item.C_DocId);
   });

Выше будет записываться в консоль, как t_DocName, так и C_DocId. Однако нам нужно вывести эти данные на экран.

Для этого мы можем сделать следующее:

<FlatList
 data={this.state.dataToDisplay}
 renderItem={({item}) => <Text>{`T_Doc: ${item.T_DocName} C_Doc ${item.C_DocId}`}</Text>}
/>

Но подождите, нам нужно создать dataToDisplay и что это за состояние?

State - это глобальный контейнер уровня компонента, к которому можно получить доступ в любом месте вашего класса / функции.

Чтобы создать dataToDisplay, давайте отредактируем вашу функцию.

 CallOData(){
    const api = new ServiceOrdersOData();
    const odataValues = api.getServiceOrdersOData();
    if(typeof(odataValues.d.results) != "undefined"){
      this.setState({dataToDisplay: odataValues.d.results.map(item => {
        DocName: item.T_DocName,
        DocId: item.C_DocId
        });
      });
    }
}

Отлично, у нас есть состояние, которое содержит значения, которые нам нужны, теперь просто добавьте свой плоский список к вашему рендеру, проверьте данные, и все готово!

render() {
        return (
          this.state.dataToDisplay && (<FlatList
            data={this.state.dataToDisplay}
            renderItem={({ item }) => <Text>{`T_Doc: ${item.DocName} C_Doc ${item.DocId}`}</Text>}
          />)
        )
      }

Теперь вы должны увидеть свои данные на экране! yesssss

Answer 2

Итак, у вас есть эти odataValues, и вы, вероятно, должны сохранить их, чтобы они указывали при получении. Затем в рендере вы можете отобразить результаты примерно так:

return (
   <View> {/* not necessary, this is only a mock of the rest of your layout */}
     {this.state.odataValues.d.results.map(result => <ResultRenderer result={result} />)}
   </View>
 )

ResultRenderer должен быть компонентом, который рендерит реквизиты, которые он получает.

Я покажу здесь, как отобразить значения, поскольку вы об этом и просили. Тем не менее, более эффективным вариантом является использование FlatList, поскольку, если у вас длинный список дочерних элементов, он будет отображать только те, которые отображаются на экране, экономя на ненужной обработке. Вы используете это так:

<FlatList
  data={this.state.odataValues.d.results}
  renderItem={result => <ResultRenderer />}
/>