How to parse an array of object in react native and create a new array out of it?

Question

I am at beginner's stage of react native trying to parse an array of objects from image library, I have gone through multiple solutions but encountering various errors.

Following is the json I get after selecting image.

[
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-cefaffca-0fad-4b1a-aae5-1e7393a5da3f.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-d6052c1f-c075-47dc-a759-ff99d4d082a8.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-73537151-5f6c-4ece-9ee8-9e018b243ace.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:1048858,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-8ff9fe38-8050-447e-aea8-64976672fbef.jpg'
   }
]

The solution which I have been trying is from the following link.

How to update array state in react native?

The solutions which I have tried out are

    let markers = [...this.state.markers];
let index = markers.findIndex(el => el.name === 'name');
markers[index] = {...markers[index], key: value};
this.setState({ markers });

What I am not getting is where they are getting value variable. I need to create an array out of the 'path' key. Following is my code

 constructor(props){
    super(props);
    this.ShowPicker = this.ShowPicker.bind(this);
    this.createModal = this.createModal.bind(this);
    this.state = {date:"06/07/1988",valueInTens:0,valueInUnits:0,valueInFeet:0,valueInInches:0,checkedForKids:false,checkedForDrink:false,checkedForSmoke:false,filePath: {},dataForMaritalStatus:"",showSlider:false,language:"English"
  ,isModalVisible:false,checked:false,mImages:[] };
  }

my method to open picker library

chooseFile = () => {
    var options = {
      title: 'Select Image',
      customButtons: [
        { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
      ],
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.openPicker({
  multiple: true
}).then(images => {

-> images // I need to create array out of this object



//  let markers = [...this.state.mImages];
// let index = markers.findIndex(images => images.name === 'path');
// markers[index] = {...markers[index], key: value};
// this.setState({ markers });
// let newMarkers = mImages.map(el => (
//       el.name==='name'? {...el, key: value}: el
// ))
//this.setState({ markers });
this.setState((mImages:images);
  console.log(images);
});

this is where I need to ass the images

<Gallery
    style={{height:200,width:300, flex: 1, backgroundColor: 'white' }}
    // images={[
    // ]}
  />

@Tarunkonda , Please see the above array of json objects, I want to make an array of only the path key elements and pass it to image library — Pritish
– Pritish, Commented Mar 8, 2019 at 9:14

Tarun konda · Accepted Answer · 2019-03-08 09:18:09Z

0

let pathArray = markers.map(function(item){return item.path;});

pathArray is arraylist

answered Mar 8, 2019 at 9:18

Tarun konda

1,8901 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pritish Over a year ago

so which one is the state array I am maintaining ?

Pritish Over a year ago

Solution which you are seeing is from another site, I need to use it on mine

Tarun konda Over a year ago

this.state.markers.map((data) => { return item.path }) this will work try this

orhan fidan · Accepted Answer · 2019-03-08 10:20:05Z

arr = [
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-cefaffca-0fad-4b1a-aae5-1e7393a5da3f.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-d6052c1f-c075-47dc-a759-ff99d4d082a8.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:2097434,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-73537151-5f6c-4ece-9ee8-9e018b243ace.jpg'
   },
   {
      modificationDate:'1552035213000',
      size:1048858,
      mime:'image/jpeg',
      height:4608,
      width:2218,
      path:'file:///data/user/0/com.matrimonialapp/cache/react-native-image-crop-picker/image-8ff9fe38-8050-447e-aea8-64976672fbef.jpg'
   }
]
    var pathArr = [];
    arr.map((item) => {
        pathArr.push(item.path)
    })

pathArr is the array u need to create

DTul · Accepted Answer · 2019-03-08 11:18:17Z

0

If you want a new array with just the path variables from each item in the array you should use the .map function.

...
}).then(images => {
  const mImages = images.map(image => image.path);
  this.setState({mImages});
}

This will result in the following:

['http://foo.bar', 'http://bar.foo', ....]

edited Mar 8, 2019 at 11:18

answered Mar 8, 2019 at 9:15

DTul

6796 silver badges24 bronze badges

4 Comments

Pritish Over a year ago

that is the solution from another site, I want to know how to use it in my case.

DTul Over a year ago

What is different in your case?

Ayush Nawani Over a year ago

yes, your images array is this.state.markers and image URLs array is paths array

Pritish Over a year ago

I did that,did not get any error ,but when I print the log console of this.state.mImages ,please refer above edited code, I am getting it null in logs

Collectives™ on Stack Overflow

How to parse an array of object in react native and create a new array out of it?

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related