CODEWITHSUNDEEP
reactjsreact-native
Denis L
Denis L

Reputation: 121

map json result react native

I need to map json result, but when i try to do this, i get error:

[TypeError: undefined is not an object (evaluating 'item.regions.map')]

Can you help me please. I try to get text from words, where words are from lines and lines from regions

I would be very grateful for help)

Json result: 

{
  "language": "en",
  "textAngle": 0,
  "orientation": "Up",
  "regions": [
    {
      "boundingBox": "242,118,178,147",
      "lines": [
        {
          "boundingBox": "242,118,99,43",
          "words": [
            {
              "boundingBox": "242,118,99,43",
              "text": "LIVE,"
            }
          ]
        },
        {
          "boundingBox": "244,172,143,44",
          "words": [
            {
              "boundingBox": "244,172,143,44",
              "text": "WORK,"
            }
          ]
        },
        {
          "boundingBox": "246,227,174,38",
          "words": [
            {
              "boundingBox": "246,227,174,38",
              "text": "CREATE"
            }
          ]
        }
      ]
    }
  ]
}

Code:

{
    this.state.data.map(((item, index) =>
      <View key={index}>
            <Text>{item.language}</Text>
            {item.regions.map(el => {
            <Text>{el.boundingBox}</Text>
            })}
          </View>
    ))
}

Some new changes:

 this.state = {
      data: [],
    };
    
    fetch(uriBase,
{
 
 method: 'POST',
 headers: 
 {
  'Content-Type': 'multipart/form-data',
     'Ocp-Apim-Subscription-Key': subscriptionKey,
 },
 body: data,


}).then((response) => response.json()).then((data) =>
{

  const returnedData = JSON.stringify(data, null, 2);

  this.setState({
    data: this.state.data.concat(returnedData),
  })

}).catch((error) =>
{
 console.log(error);

});
  };

Upvotes: 2

Views: 55

Answers (2)

kooskoos
kooskoos

Reputation: 4859

Try if this works

    {
        let data = [this.state.data]
        data.map(((item, index) =>
          <View key={index}>
                <Text>{item.language}</Text>
                {item.regions && item.regions.map(el => {
                <Text>{el.boundingBox}</Text>
                })}
              </View>
        ))
    }

Upvotes: 0

Vencovsky
Vencovsky

Reputation: 31565

You should do some checking before doing .map and also return the Text inside .map.

// checking 
this.state.data && this.state.data.map(((item, index) =>
  <View key={index}>
        <Text>{item.language}</Text>
        // checking region before .map
        {item.regions && item.regions.map(el => {
            // you forgot the return 
            return <Text>{el.boundingBox}</Text>
        })}
      </View>
))

Upvotes: 1

Related Questions