Bdtjtk

Hi I would like to learn how I can map() through this JSON and grab the href of each image and place into a FlatList?

Currently the information I am trying to grab is collection.items.links[0].href and would like to place this href into the Image uri

The problem is I can grab one image easy and place it into a FlatList, but cannot work out how I can grab all of them and render a list of hundreds of images using the FlatList. This is because somehow I need to use map() at this point it seems:

collection.items map() .links[0].href

Thank you in advance!

Example of Json

{

  "collection": {

    "links": [

      {

        "prompt": "Next",

        "rel": "next",

        "href": "https://images-api.nasa.gov/search?media_type=image&q=moon&page=2"

      }

    ],

    "version": "1.0",

    "metadata": {

      "total_hits": 6726

    },

    "items": [

      {

        "links": [

          {

            "render": "image",

            "rel": "preview",

            "href": "https://images-assets.nasa.gov/image/PIA12235/PIA12235~thumb.jpg"

          }

        ],

        "data": [

          {

            "nasa_id": "PIA12235",

            "secondary_creator": "ISRO/NASA/JPL-Caltech/Brown Univ.",

            "keywords": [

              "Moon",

              "Chandrayaan-1"

            ],

            "date_created": "2009-09-24T18:00:22Z",

            "media_type": "image",

            "title": "Nearside of the Moon",

            "description_508": "Nearside of the Moon",

            "center": "JPL",

            "description": "Nearside of the Moon"

          }

        ],

        "href": "https://images-assets.nasa.gov/image/PIA12235/collection.json"

      },

      {

        "links": [

          {

            "render": "image",

            "rel": "preview",

            "href": "https://images-assets.nasa.gov/image/PIA13517/PIA13517~thumb.jpg"

          }

        ],

        "data": [

          {

            "nasa_id": "PIA13517",

            "secondary_creator": "NASA/GSFC/Arizona State University",

            "keywords": [

              "Moon",

              "Lunar Reconnaissance Orbiter LRO"

            ],

            "date_created": "2010-09-10T22:24:40Z",

            "media_type": "image",

            "title": "Color of the Moon",

            "description_508": "Color of the Moon",

            "center": "JPL",

            "description": "Color of the Moon"

          }

        ],

        "href": "https://images-assets.nasa.gov/image/PIA13517/collection.json"

      },

      {

        "links": [

          {

            "render": "image",

            "rel": "preview",

            "href": "https://images-assets.nasa.gov/image/PIA12233/PIA12233~thumb.jpg"

          }

        ],

        "data": [

          {

            "nasa_id": "PIA12233",

            "secondary_creator": "NASA/JPL-Caltech",

            "keywords": [

              "Moon",

              "Chandrayaan-1"

            ],

            "date_created": "2009-09-24T18:00:20Z",

            "media_type": "image",

            "title": "Mapping the Moon, Point by Point",

            "description_508": "Mapping the Moon, Point by Point",

            "center": "JPL",

            "description": "Mapping the Moon, Point by Point"

          }

        ],

        "href": "https://images-assets.nasa.gov/image/PIA12233/collection.json"

      },

      {

        "links": [

          {

            "render": "image",

            "rel": "preview",

            "href": "https://images-assets.nasa.gov/image/PIA12228/PIA12228~thumb.jpg"

          }

        ],

        "data": [

          {

            "nasa_id": "PIA12228",

            "secondary_creator": "NASA/JPL-Caltech/USGS",

            "keywords": [

              "Moon",

              "Cassini-Huygens"

            ],

            "date_created": "2009-09-24T18:00:15Z",

            "media_type": "image",

            "title": "Cassini Look at Water on the Moon",

            "description_508": "Cassini Look at Water on the Moon",

            "center": "JPL",

            "description": "Cassini Look at Water on the Moon"

          }

        ],

        "href": "https://images-assets.nasa.gov/image/PIA12228/collection.json"

      },

Also here is my code:

export default class ThirdScreen extends React.Component {

  state = {

    search: "",

    data: "",

  }



  fetchNasa = () => {

    const {search} = this.state;



    fetch(`https://images-api.nasa.gov/search?q=${search}&media_type=image`)

    .then((response) => response.json())

    .then((result) => this.setState({

      data: result.collection.items[0].links[0].href

    }))



  }









  renderItem = ({item}) => {

    return ( 



        <View>

          <TouchableOpacity 

            style={{margin: 5, backgroundColor: 'black', padding: 15}}

          >

          <Image 

            source={{uri: this.state.data}}

            style={{width: 60, height: 60}}

          />  

          </TouchableOpacity>

        </View>

    )

  }



    render() {

      const {data} = this.state

      return (

        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>

        <FlatList

          data={data}

          renderItem={this.renderItem}

          keyExtractor={(item, index) => index.toString()}

        />

        </View>

      );

    }

  }

In JavaScript, Array.map() takes a function that takes each item of the original array and returns the new item that replaces it. You can use it to transform arrays from one structure to another. For example, you can transform the JSON data in your post from its original, complicated form to simply an array of strings of the HREFs:

const data = result.collection.items.map(eachItem => {

    return Array.isArray(eachItem.links) && eachItem.links[0] && eachItem.links[0].href

});

Now plug something like that into your fetchNasa function so that your data variable in state is an array of strings representing HREFs:

fetchNasa = () => {

  const {search} = this.state;

  fetch(`https://images-api.nasa.gov/search?q=${search}&media_type=image`)

    .then((response) => response.json())

    .then((result) => this.setState({

      data: result.collection.items.map(eachItem => {

        return Array.isArray(eachItem.links) && eachItem.links[0] && eachItem.links[0].href

      })

    }));

}

Finally, renderItem should use the item passed to it as an argument in order to return what to render. In fact, renderItem is essentially a version of an Array.map function: it takes each item of the original data structure and returns some kind of React elements to render:

renderItem = ({item}) => {

  return ( 

    <View>

      <TouchableOpacity 

        style={{margin: 5, backgroundColor: 'black', padding: 15}}

      >

      <Image 

        source={{uri: item}}

        style={{width: 60, height: 60}}

      />  

      </TouchableOpacity>

    </View>

  )

}

Because each item in your this.state.data array is a string representing an HREF, you can pass that directly into your <Image> source prop as the URI.