Как выбрать данные из ответа JSON в React?

ProgramBox

Как выбрать данные из ответа JSON в React?

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#reactjs #react-native #react-redux #react-hooks #react-router

Вопрос:

У меня есть ответ JSON в формате ниже, и я хочу выбрать данные из него в React. Я попробовал сделать это ниже, но пока безуспешно и получил TypeError: valuesArray.map is not a function . Может ли кто-нибудь посмотреть, что здесь нужно изменить.

Код:

 const valuesArray = JSON.parse(data);
const users = valuesArray.map((u) => (
          <tr key={u.builder}>
            <td>{u.builder}</td> 
            <td>{u.account_id}</td>
          </tr>
        ));

JSON

 {
  "44876989": [
    {
      "Key": "builder",
      "Value": "test@outlook.com"
    },
    {
      "Key": "account_id",
      "Value": "030303"
    }
  ],
  "2207966": [
    {
      "Key": "builder",
      "Value": "aabc@gmail.com"
    },
    {
      "Key": "account_id",
      "Value": "002235"
    }
  ],
  "5393": [
    {
      "Key": "builder",
      "Value": "xyz@abc.com"
    },
    {
      "Key": "account_id",
      "Value": "000mmm"
    }
  ]
}

1. Что такое valuesArray? Это тот самый JSON?

2. Если valuesArray-это JSON, то это объект, а не массив.

3. Да, я просто анализирую ответ JSON в valuesArray const valuesArray = JSON.parse(data);

4. Поскольку JSON является объектом после того, как вы его проанализируете, это map() не имеет никакого смысла делать здесь. Вы можете либо преобразовать JSON в форму, которая работает с вашим map() кодом, либо изменить map() ее для работы с существующей формой данных.

Ответ №1:

Вы получаете объект, содержащий массив свойств. Вы должны преобразовать его в массив объектов, а затем визуализировать.

Примечание: Вы должны преобразовать объект в массив для визуализации, когда вы получаете информацию из API или когда вы берете ее из хранилища redux (с помощью селектора).

 const Example = ({ values }) => {
  const valuesArray = Object.values(values)
    .map(arr =>
      Object.fromEntries(
        arr.map(({ Key, Value }) => [Key, Value])
      )
    );

  const users = valuesArray.map((u) => (
    <tr key={u.builder}>
      <td>{u.builder}</td> 
      <td>{u.account_id}</td>
    </tr>
  ));

  return (
    <table>
      <tbody>
        {users}
      </tbody>
    </table>
  );
};

const values = {"5393":[{"Key":"builder","Value":"xyz@abc.com"},{"Key":"account_id","Value":"000mmm"}],"2207966":[{"Key":"builder","Value":"aabc@gmail.com"},{"Key":"account_id","Value":"002235"}],"44876989":[{"Key":"builder","Value":"test@outlook.com"},{"Key":"account_id","Value":"030303"}]};

ReactDOM.render(
  <Example values={values} />,
  root
);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Хотя вы можете визуализировать его напрямую, деструктурировав массив Value из каждого объекта в свойствах, если порядок свойств сохраняется, но это может привести к ошибкам:

 const Example = ({ values }) => {
  const users = Object.values(values)
    .map(([{ Value: builder }, { Value: account_id }]) => (
      <tr key={builder}>
        <td>{builder}</td> 
        <td>{account_id}</td>
      </tr>
    ));

  return (
    <table>
      <tbody>
        {users}
      </tbody>
    </table>
  );
};

const values = {"5393":[{"Key":"builder","Value":"xyz@abc.com"},{"Key":"account_id","Value":"000mmm"}],"2207966":[{"Key":"builder","Value":"aabc@gmail.com"},{"Key":"account_id","Value":"002235"}],"44876989":[{"Key":"builder","Value":"test@outlook.com"},{"Key":"account_id","Value":"030303"}]};

ReactDOM.render(
  <Example values={values} />,
  root
);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Ответ №2:

Поскольку вы имеете дело с объектом, содержащим массивы, я придумал простую логику для извлечения необходимых вам данных,

 const valuesArray  = {
    44876989: [
      {
        Key: 'builder',
        Value: 'test@outlook.com',
      },
      {
        Key: 'account_id',
        Value: '030303',
      },
    ],
    2207966: [
      {
        Key: 'builder',
        Value: 'aabc@gmail.com',
      },
      {
        Key: 'account_id',
        Value: '002235',
      },
    ],
    5393: [
      {
        Key: 'builder',
        Value: 'xyz@abc.com',
      },
      {
        Key: 'account_id',
        Value: '000mmm',
      },
    ],
  };

 
  return (
    <table>
      {/* mapping through the keys of the object. */}
      {Object.keys(valuesArray).map((a) => {  
        {/* each item here is an array. Find the object you need */}
        const builder =   valuesArray[a].find(v => v.Key === "builder").Value; 
        const account_id =   valuesArray[a].find(v => v.Key === "account_id").Value;   
       
        return (
          <tr key={builder}>
            <td>{builder}</td>
            <td>{account_id}</td>           
          </tr>
        ); 
      })}
    </table>
  );

Метки: Как выбрать данные из ответа JSON в React?