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的观点。

在这种情况下，我将创建一个函数，该函数接受数据并返回新数组。我只是为您的案例做一个例子。请记住，使用本示例中的任何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

2 个答案: