从 React-Native 中的退出数据制作动态 JSONArray

Question

我是 React-native 新手

谁能告诉我如何从现有 api 数据创建动态数组？

例如，我有一个这样的数组：

[
  {name: 'ajay', time: '09:00', class: 'one',title: 'Archery Training', description: 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ', circleColor: '#009688',lineColor:'#009688'},
  {name: 'vijay',time: '10:45', class: 'two',title: 'Play Badminton', description: 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.'},
  {name: 'zoya',time: '12:00', class: 'six',title: 'Lunch'},
  {name: 'prem',time: '14:00',class: 'five', title: 'Watch Soccer', description: 'Team sport played between two teams of eleven players with a spherical ball. ',lineColor:'#009688'},
  {name: 'ram',time: '16:30',class: 'ten', title: 'Go to Fitness center', description: 'Look out for the Best Gym & Fitness Centers around me :)', circleColor: '#009688'}
]

现在我想把它转换成这样：

[
  {time: '09:00', title: 'Archery Training', description: 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ', circleColor: '#009688',lineColor:'#009688'},
  {time: '10:45', title: 'Play Badminton', description: 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.'},
  {time: '12:00', title: 'Lunch'},
  {time: '14:00', title: 'Watch Soccer', description: 'Team sport played between two teams of eleven players with a spherical ball. ',lineColor:'#009688'},
  {time: '16:30', title: 'Go to Fitness center', description: 'Look out for the Best Gym & Fitness Centers around me :)', circleColor: '#009688'}
]

提前致谢

Answer 1

你好，你可以写 javascript 这就是 React-Native 的重点。

在那种情况下，我会创建一个函数，它获取数据和 return 新数组。我只是为你的案例做了一个例子。请记住，处理来自任何 API 的数据可能比此示例更困难。所以如果你真的得到一个应该转换成新数组的数组，那就是这样..

var yourAPIData = [
  {name: 'ajay', time: '09:00', class: 'one',title: 'Archery Training', description: 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ', circleColor: '#009688',lineColor:'#009688'},
  {name: 'vijay',time: '10:45', class: 'two',title: 'Play Badminton', description: 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.'},
  {name: 'zoya',time: '12:00', class: 'six',title: 'Lunch'},
  {name: 'prem',time: '14:00',class: 'five', title: 'Watch Soccer', description: 'Team sport played between two teams of eleven players with a spherical ball. ',lineColor:'#009688'},
  {name: 'ram',time: '16:30',class: 'ten', title: 'Go to Fitness center', description: 'Look out for the Best Gym & Fitness Centers around me :)', circleColor: '#009688'}
]

const convertDataFromAPI = (data) => {
 var newArr = [];
 for ( var a = 0; a < data.length; a++){
 var myObject = {};
 data[a].time ? myObject['time'] = data[a].time : null
 data[a].title ? myObject['title'] = data[a].title : null
 data[a].description ? myObject['description'] = data[a].description : null
 data[a].circleColor ? myObject['circleColor'] = data[a].circleColor : null
 data[a].lineColor ? myObject['lineColor'] = data[a].lineColor : null
    newArr.push(myObject)
  }

  return newArr
}

console.log(convertDataFromAPI(yourAPIData))

此外，您可以安装 axios. 它可以帮助您发出 hppt 请求。如果需要将数据转换成json类型，对于后续的数据处理会更方便。请记住，在未来的 convertDataFromArray 函数中，必须以不同于数组的方式处理对象。

axios.get(request)
  .then(response => response.json())
  .then(response => convertDataFromAPI(response))
  .catch(error => console.log(error.message))

希望对您有所帮助！

Answer 2

不确定哪种方法更简单。

下面是我如何使用 lodash 库。

首先，安装它。

npm i --save lodash

然后在您的应用程序中导入。

import { omit, map } from 'lodash'

接下来就是制作那个数组对象了

const data = [
   {name: 'ajay', time: '09:00', class: 'one',title: 'Archery Training', description: 'The Beginner Archery and Beginner Crossbow course does not require you to bring any equipment, since everything you need will be provided for the course. ', circleColor: '#009688',lineColor:'#009688'},
   {name: 'vijay',time: '10:45', class: 'two',title: 'Play Badminton', description: 'Badminton is a racquet sport played using racquets to hit a shuttlecock across a net.'},
   {name: 'zoya',time: '12:00', class: 'six',title: 'Lunch'},
   {name: 'prem',time: '14:00',class: 'five', title: 'Watch Soccer', description: 'Team sport played between two teams of eleven players with a spherical ball. ',lineColor:'#009688'},
   {name: 'ram',time: '16:30',class: 'ten', title: 'Go to Fitness center', description: 'Look out for the Best Gym & Fitness Centers around me :)', circleColor: '#009688'}
]  

const newData = map(data, (obj) => {
  const mappedObj = omit(obj, ['name', 'class'])
  return mappedObj
})

让我知道它是否有效

从 React-Native 中的退出数据制作动态 JSONArray

make Dynamic JSONArray from Exiting Data in React-Native

android

timeline

react-native