What is the best way to retrieve a value from one array based on its index in React Native?

Question

What is the best way to retrieve a value from one array based on its index in React Native?

Looking to populate the centreValues array with values from another array

    const centreValues=[
  {
    title:'Type',
    value:centreDetail.location_type
  },
  {
    title:'Address',
    value:centreDetail.address1+centreDetail.address2
  },
  {
    title:'City',
    value:centreDetail.city
  },
  {
    title:'State/Province',
    value:centreDetail.state
  },
  {
    title:'Postal/Zipcode',
    value:centreDetail.zip
  },
  {
    title:'Phone',
    value:centreDetail.phone
  },
]

The structure of my centreDetails JSON object is:

centreDetails={
   location_type:'some Value',
   address1: 'some Value',
   address2:'some Value',
   ....
}

How can I substitute these values into the centreValues array?

javascript arrays

Answer 1

Answer №1

If you're dealing with a simple JS object and array situation, it looks like you need the centreDetail in your provided array. Check out the example below:

const centreDetail = {
     location_type: "something",
    city: "something",
    state: "something",
    zip: "something",
    phone: "something",
}

From here, you can access the properties in the object like this:

const centreValues=[
  {
    title:'Type',
    value:centreDetail.location_type
  },

  {
    title:'City',
    value:centreDetail.city
  },
  {
    title:'State/Province',
    value:centreDetail.state
  },
  {
    title:'Postal/Zipcode',
    value:centreDetail.zip
  },
  {
    title:'Phone',
    value:centreDetail.phone
  },
]

Update: You mentioned adding JSON to your question now. This means you'll need to incorporate a loop. Consider using a for loop or a while loop to iterate through each index of the array and add it to another array. You could also use map for this task.

Based on your feedback, everything seems to be working fine when I tested it in the console. Are you sure about the issue you mentioned?

https://i.sstatic.net/P9uYB.png

Answer 2

If you're dealing with a simple JS object and array situation, it looks like you need the centreDetail in your provided array. Check out the example below:

const centreDetail = {
     location_type: "something",
    city: "something",
    state: "something",
    zip: "something",
    phone: "something",
}

From here, you can access the properties in the object like this:

const centreValues=[
  {
    title:'Type',
    value:centreDetail.location_type
  },

  {
    title:'City',
    value:centreDetail.city
  },
  {
    title:'State/Province',
    value:centreDetail.state
  },
  {
    title:'Postal/Zipcode',
    value:centreDetail.zip
  },
  {
    title:'Phone',
    value:centreDetail.phone
  },
]

Update: You mentioned adding JSON to your question now. This means you'll need to incorporate a loop. Consider using a for loop or a while loop to iterate through each index of the array and add it to another array. You could also use map for this task.

Based on your feedback, everything seems to be working fine when I tested it in the console. Are you sure about the issue you mentioned?

https://i.sstatic.net/P9uYB.png

Answer 3

Answer №2

Below is a method to accomplish this task:

const centreDetails = {
   location_type:'my location',
   address1: 'an address',
   address2: 'another address',
   phone: '516546548',
   city: 'Wakanda'
}

const centreValues = Object.entries(centreDetails).map(([title, value]) => ({ title, value}))

console.log(centreValues)

You need to convert your object into an array containing key-value pairs using Object.entries()

After that, you can structure it as desired by using the map function on your array

UPDATE
To include only specific fields, you can apply a filter function:

const centreDetails = {
    location_type: 'my location',
    address1: 'an address',
    address2: 'another address',
    phone: '516546548',
    city: 'Wakanda'
}

const desiredValues = ["location_type", "address2", "city"]

const centreValues = Object.entries(centreDetails)
    .filter(([title, value]) => !!desiredValues.includes(title)) //Checks if the value exists
    .map(([title, value]) => ({ title, value}))

console.log(centreValues)

UPDATE 2 :

If you want to assign different aliases to the fields, here is one way to do it:

const centreDetails = {
    location_type: 'my location',
    address1: 'an address',
    address2: 'another address',
    phone: '516546548',
    city: 'Wakanda'
}

const desiredValues = {
    "location_type" : "location",
    "address2": "this guy's second address",
    "city": "Hey, he lives here !"
}

const centreValues = Object.entries(centreDetails)
    .filter(([title, value]) => desiredValues[title])
    .map(([title, value]) => ({ title : desiredValues[title], value}))

console.log(centreValues)

Answer 4

Below is a method to accomplish this task:

const centreDetails = {
   location_type:'my location',
   address1: 'an address',
   address2: 'another address',
   phone: '516546548',
   city: 'Wakanda'
}

const centreValues = Object.entries(centreDetails).map(([title, value]) => ({ title, value}))

console.log(centreValues)

You need to convert your object into an array containing key-value pairs using Object.entries()

After that, you can structure it as desired by using the map function on your array

UPDATE
To include only specific fields, you can apply a filter function:

const centreDetails = {
    location_type: 'my location',
    address1: 'an address',
    address2: 'another address',
    phone: '516546548',
    city: 'Wakanda'
}

const desiredValues = ["location_type", "address2", "city"]

const centreValues = Object.entries(centreDetails)
    .filter(([title, value]) => !!desiredValues.includes(title)) //Checks if the value exists
    .map(([title, value]) => ({ title, value}))

console.log(centreValues)

UPDATE 2 :

If you want to assign different aliases to the fields, here is one way to do it:

const centreDetails = {
    location_type: 'my location',
    address1: 'an address',
    address2: 'another address',
    phone: '516546548',
    city: 'Wakanda'
}

const desiredValues = {
    "location_type" : "location",
    "address2": "this guy's second address",
    "city": "Hey, he lives here !"
}

const centreValues = Object.entries(centreDetails)
    .filter(([title, value]) => desiredValues[title])
    .map(([title, value]) => ({ title : desiredValues[title], value}))

console.log(centreValues)

Answer 5

Answer №3

To retrieve all the values of centreDetail as an object result

centreValues.map(center => center.value.centreDetail)

If you want to transfer it to another array and manage the state, do the following:

centreValues.map(center => this.setState({ centreDetailArray: [...this.state.centreDetailArray, center.value.centreDetail] })

You can then access the result from the state like this:

<View>  
  {this.state.centreDetailArray.map(centerDetail =><Text>{centerDetail}</Text>)}
</View>

Answer 6

To retrieve all the values of centreDetail as an object result

centreValues.map(center => center.value.centreDetail)

If you want to transfer it to another array and manage the state, do the following:

centreValues.map(center => this.setState({ centreDetailArray: [...this.state.centreDetailArray, center.value.centreDetail] })

You can then access the result from the state like this:

<View>  
  {this.state.centreDetailArray.map(centerDetail =><Text>{centerDetail}</Text>)}
</View>

What is the best way to retrieve a value from one array based on its index in React Native?

Answer №1

Answer №2

Answer №3

Similar questions

What is the smallest server.js file needed to run a react/redux application?

Capturing user input in HTML and passing it to JavaScript

Tips for extracting specific elements from an array

Confirmation of numerous checkbox selections

Create an event listener for clicking on an image that potentially has a corner ribbon obscuring a portion of it

Exploding particles on the HTML5 canvas

Mapping an array of objects within another array of objects

My HTML file is not able to load my Javascript file

Iterate through an object, with certain keys being duplicated

Generating and inserting information into a connected Llist

No reply from Axios after using async await

Iterating through a 2D array using KnockoutJS foreach loop

What are alternative ways to retrieve data from a different server using AJAX without relying on JSONP?

The functionality of the controller is not functioning properly in AngularJS

The caption below the image is not functioning correctly when hovering over it

What is the step-by-step process for incorporating the `module` module into a Vue project?

Setting a default value for Autocomplete in MaterialUI and React.js

Include a new row in the form that contains textareas using PHP

Matching objects in an array based on a specific property using the key of another object

A comparison of copyFileSync and writeFileSync