Accessing data in an array List using axios.get in React Native

Question

How to Make a Accessing data in an array, and list separated by categories Using axios React Native

I am trying to deploy a list with categories and products using axio in react native

my json structure

  [
      {
        "id": "1",
        "name": "TV",
        "list": [
          {
            "idp": "1",
            "namep": "TV 43"
          },
          {
            "idp": "2",
            "namep": "TV 32"
          }
        ]
      },
      {
        "id": "2",
        "name": "Couch",
        "list": [
          {
            "idp": "3",
            "namep": "Couch for 3 people"
          },
          {
            "idp": "4",
            "namep": "Couch for 2 people"
          }
        ]
      }
    ]

what I've already done, so I can display categories

    constructor(props) {
       super(props);
       this.state = { category: [], list: [] };
       }

    componentWillMount() {
                axios.get('http://localhost/api/list.json')
               .then(response => {
                 this.setState({ 

             category: response.data, 
             list: response.data.list });

             })
               .catch(() => { console.log('Err'); });
           } 
.............

{this.state.category.map((item, i) => {
<Text>{item.name}</Text>
  { item.list.map((product, i) => {
       <Text>{product.namep}</Text>
  })}
 })}

Example list

Accessing data in an array, and list separated by categories @Oxcarga — Camila F
– Camila F, Commented Mar 18, 2018 at 1:14

Oxcarga · Accepted Answer · 2018-03-18 03:55:57Z

Sorry I can't give you a more detailed and focused answer since I'm not familiar with react native but logic goes like this:

A loop to iterate over main array and extract categories names then another loop inside that one for iterating over products.

const arr = [
      {
        "id": "1",
        "name": "TV",
        "list": [
          {
            "idp": "1",
            "namep": "TV 43"
          },
          {
            "idp": "2",
            "namep": "TV 32"
          }
        ]
      },
      {
        "id": "2",
        "name": "Couch",
        "list": [
          {
            "idp": "3",
            "namep": "Couch for 3 people"
          },
          {
            "idp": "4",
            "namep": "Couch for 2 people"
          }
        ]
      }
    ];

const parentEl = document.querySelector('#list');


arr.forEach((cat) => {
	const catEl = document.createElement('div')
  catEl.textContent = cat.name
  parentEl.append(catEl)
  
  cat.list.forEach((prod) => {
    const listEl = document.createElement('ul')
    const listItem = document.createElement('li')
    listItem.textContent = prod.namep
    listEl.append(listItem)
    parentEl.append(listEl)
  })
})

<div id="list">
  
</div>

So, not knowing react native AND assuming this code you pasted is correct, I'm going to risk saying it would go something like this:

{
  this.state.category.forEach((item, i) => {
    <Text>{item.name}</Text>
    item.list.forEach((product, i) => {
      <Text>{product.namep}</Text>
    })
  })
}

Thank you, I adjusted the logic in ReactNative and it worked perfectly.

Collectives™ on Stack Overflow

Accessing data in an array List using axios.get in React Native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related