How to get array value from the other array in react native?

Question

In this code I want the value in centreValues to come from some other 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
  },
]

my centreDetails is json like this:

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

I want to bring these values in centreValues array.How could I do that?

Can you make a clearer explanation about : What your input is, what your current output is and what your desired output is — Treycos
– Treycos, Commented Dec 17, 2018 at 10:24

Danish · Accepted Answer · 2018-12-17 10:40:37Z

1

its a easy JS object and array scenario. According to your provided array it seems that you expect to have centreDetail. see my below example

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

now you can call the following above object in your array

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
  },
]

EDIT: you added json in your question now. therefor, you need a loop. use for loop or while to go through the each index of array and added in your other array. you can also use map for that also

EDIT according to your comment. are you sure about that. see i typed this all in console. it seems to be working.

edited Dec 17, 2018 at 10:40

answered Dec 17, 2018 at 10:28

Danish

1,49719 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eshant Bist Over a year ago

I am using the data like this only but the value is coming undefined

Eshant Bist Over a year ago

My structure is similar but I am getting values undefined in console

Eshant Bist Over a year ago

(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 0: {title: "Type", value: undefined} 1: {title: "Address", value: NaN} 2: {title: "City", value: undefined} 3: {title: "State/Province", value: undefined} 4: {title: "Postal/Zipcode", value: undefined} 5: {title: "Phone", value: undefined} 6: {title: "Fax", value: undefined} 7: {title: "Email", value: undefined} 8: {title: "President", value: undefined} 9: {title: "Secretary", value: undefined} 10: {title: "Treasurer", value: undefined}

Danish Over a year ago

@EshantBist can you try in console by copying your both arrays?

Treycos · Accepted Answer · 2018-12-17 11:50:41Z

1

Here is how you can achieve it :

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 will have to convert your object into an array made out of pairs of key and values which is made using Object.entries()

Then you only have and create your desired structure using map on your array

EDIT
You can apply an additional filter function if you only want certain fields :

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)

EDIT 2 :

If you want to have a different alias here's a 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)

edited Dec 17, 2018 at 11:50

answered Dec 17, 2018 at 10:38

Treycos

7,4913 gold badges29 silver badges53 bronze badges

4 Comments

Eshant Bist Over a year ago

What if I want only some elements of this array?

Treycos Over a year ago

You can filter out the array created, i'll update it with a new snippet

Eshant Bist Over a year ago

and suppose I want to change that title location_type as location what should I do for it

Treycos Over a year ago

Alright, I'll update my answer in a few minutes, try listing everything you need in your question at once

Psartek · Accepted Answer · 2018-12-17 10:28:02Z

0

to get all values of centreDetail as object result

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

To transfer to another array, manage the state like this:

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

Then you can get the result from state like this:

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

answered Dec 17, 2018 at 10:28

Psartek

4853 silver badges10 bronze badges

3 Comments

Treycos Over a year ago

This is not a React question ;)

Psartek Over a year ago

It is written 'React Native' in your title

Eshant Bist Over a year ago

Its Basically a react question doesn't matter whether its react or react-native

Collectives™ on Stack Overflow

How to get array value from the other array in react native?

3 Answers 3

4 Comments

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related