How to turn an object into an array using map()?

Question

I have a function that captures images from the camera and gallery, but when choosing an image or capturing a photo my function is returning an object, I need to use map() so that it returns an array containing all the information from the image's URI . How could I implement map() in this case?

This is my function:

const [uriImg, setUriImg] = useState('');

function imagePickerCallback(data) {

if (data.didCancel) {
    return;
  }

  if (data.error) {
    return;
  }

  if (!data.uri) {
    return;
  }
  setUriImg(data);
  
}

This is where I call the function

<Image 
    source = {{
    uri: uriImg
    ? uriImg.uri
    : 'https://socialistmodernism.com/wpcontent/uploads/2017/07/placeholder-image.png?w=640'}}
    style={styles.placeholderImage}
 />

      <View style={styles.optionsCamera}>
        <TouchableOpacity
          style={styles.button}
          onPress={() =>
          ImagePicker.launchCamera({},imagePickerCallback)
          }>
          <Text style={styles.buttonText}>Abrir câmera</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.button}
          onPress={() =>
          ImagePicker.launchImageLibrary({},imagePickerCallback)
          }>
          <Text style={styles.buttonText}>Escolher imagem</Text>
        </TouchableOpacity>
      </View>

This is what appears in the console when choosing or capturing an image, an object.

LOG {"assets": [{"fileName": "rn_image_picker_lib_temp_bbd3b196-997f-4227-80aa-f0d86824969a.jpg", "fileSize": 622543, "height": 2289, "type": "image/jpeg", "uri": "file:///data/user/0/com.francaservices/cache/rn_image_picker_lib_temp_bbd3b196-997f-4227-80aa-f0d86824969a.jpg", "width": 2289}]}

If you have a JS Object then .map() is not a function. Instead I suggest looking at using ```Object.entries(...)``` — Tumo Masire, Jul 21 '21 at 18:30
how could I use Object.entries (...)? I'm new to react-native and I don't really know how to use it. — Paloma Faria, Jul 21 '21 at 18:50
Does the image picker select only 1 file at a time? If yes try this `setUriImg(data.assets[0].uri)` — Rajendran Nadar, Jul 21 '21 at 18:55
Does this answer your question? [How to convert an Object {} to an Array \[\] of key-value pairs in JavaScript](https://stackoverflow.com/questions/38824349/how-to-convert-an-object-to-an-array-of-key-value-pairs-in-javascript) — Gabriel Donadel Dall'Agnol, Aug 31 '21 at 01:09

score 1 · Answer 1 · answered Jul 21 '21 at 19:24

A JavaScript Object type does not have a .map() function. Instead you can iterate through an Object using Object.entries(...) to get the keys and value. There are multiple ways to do this:

data = {"assets": [{"fileName": "rn_image_picker_lib_temp_bbd3b196-997f-4227-80aa-f0d86824969a.jpg", "fileSize": 622543, "height": 2289, "type": "image/jpeg", "uri": "file:///data/user/0/com.francaservices/cache/rn_image_picker_lib_temp_bbd3b196-997f-4227-80aa-f0d86824969a.jpg", "width": 2289}]}
array = [] // A new array to store the values

// Assume 'data' is the object returned when an image is updated
Object.entries(data.assets[0]).forEach(([key, value]) => {
   array.push([key, value]); // Stores each key and value as an array pair
});

// Map over the new array printing out the keys and values
array.map(val => {console.log("Key:",val[0]+",","Value:",val[1])})

Good night, I tried using the code and it didn't work. I need to select images from the gallery or take pictures with the camera, the image I gave is just an example. I used the code and I'm still receiving an object, I don't know if I'm using it correctly. Basically, I can take the picture and select the image, but when I call the image's URI it should come as an array and not an object, so when I call the image it doesn't appear visually to the user. — Paloma Faria, Jul 22 '21 at 04:12

score 0 · Accepted Answer · edited Sep 01 '21 at 01:33

0

Solved only with:

data.assets[0]

edited Sep 01 '21 at 01:33

Jeremy Caney

7,102
69
48
77

answered Aug 31 '21 at 18:26

Paloma Faria

21
4

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – J Livengood Sep 01 '21 at 07:20

How to turn an object into an array using map()?

2 Answers2