Convert array data into a string - reactjs

Question

I have an array with several objects in it. To show you the structure of the array it is like this

0: {lat: "7.9511758", lon: "80.7426426"}
1: {lat: "6.9566662", lon: "80.7608237"}
2: {lat: "6.3872411", lon: "80.4952031"}
3: {lat: "5.9435367", lon: "80.4543506"}
4: {lat: "6.4543259", lon: "81.5608547"}
5: {lat: "7.8554038", lon: "80.6491562"}
6: {lat: "6.8556687", lon: "81.0505434"}
7: {lat: "7.293609", lon: "80.6391363"}
8: {lat: "6.802641", lon: "80.7899271"}
9: {lat: "8.3351457", lon: "80.3332731"}
10: {lat: "6.0237174", lon: "80.2153073"}
11: {lat: "7.9341074", lon: "80.943138"}
12: {lat: "7.9317005", lon: "81.5589219"}
13: {lat: "6.8377508", lon: "81.8086608"}

I want to create a string using the data of this array. I need to create a string that looks like this. My data is stored in a state as this.state.destinationLocation

7.9511758,80.7426426|6.9566662,80.7608237|6.3872411,80.4952031|.....

How can i achieve this result?

Have you tried anything? Also, it's nice to provide volunteers sample data as text so they don't have to transcribe data from a picture... — Heretic Monkey
– Heretic Monkey, Commented Nov 10, 2019 at 12:44

Giang Le · Accepted Answer · 2019-11-10 12:47:48Z

7

You can use reduce

const stringData = data.reduce((result, item) => {
  return `${result}${item.lat},${item.lon}|`
}, "")

console.log(stringData)

answered Nov 10, 2019 at 12:47

Giang Le

7,1294 gold badges29 silver badges28 bronze badges

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

Comments

str · Accepted Answer · 2019-11-10 13:13:00Z

4

The easiest way to do this is using Array#map and Array#join:

yourArray.map(({lat, lon}) => `${lat},${lon}`).join('|');

Also see object destructuring and template literals.

edited Nov 10, 2019 at 13:13

answered Nov 10, 2019 at 13:07

str

45.5k18 gold badges117 silver badges134 bronze badges

1 Comment

ajobi Over a year ago

Giving upvote! I like this solution even better than reduce() approach, as it is more declarative and at the same time simpler / needs less code.

adiga · Accepted Answer · 2019-11-10 13:09:23Z

3

I think Array.reduce method is the way to go.

const array = [{lat: "1", lon: "2"},{lat: "3", lon: "4"} ]

const reducedArray = array.reduce((acc, curr) => `${acc}${curr.lat},${curr.lon}|` ,'')

console.log(reducedArray)

Working JS Bin example: https://jsbin.com/jawiziduxo/edit?js,console,output

edited Nov 10, 2019 at 13:09

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Nov 10, 2019 at 12:48

Kary

2381 silver badge8 bronze badges

1 Comment

adiga Over a year ago

How do I create a runnable stack snippet?

ajobi · Accepted Answer · 2019-11-10 12:54:02Z

1

This is what I would suggest:

const myString = myArray.reduce((accumulator, item) =>
accumulator ? `${accumulator}|${item.lat},${item.lon}` : `${item.lat},${item.lon}`, null);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

answered Nov 10, 2019 at 12:54

ajobi

3,1363 gold badges17 silver badges30 bronze badges

1 Comment

mohkamfer Over a year ago

This should be the least erroneous and the most reliable solution.

mohkamfer · Accepted Answer · 2019-11-10 12:47:13Z

0

Well you could just iterate through the entries and append into a string..

Here's a pseudo-code of what you need to do

set string to empty
for each entry in array
    append lat, comma, lng, pipe
repeat

Then you would have string variable containing what you need.

answered Nov 10, 2019 at 12:47

mohkamfer

4413 silver badges14 bronze badges

Comments

adiga · Accepted Answer · 2019-11-10 13:20:18Z

0

We can do something like this:

class Hello extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [
        { lat: "3.23434234", lon: "233.46353252" },
        { lat: "3.23434234", lon: "233.46353252" },
        { lat: "3.23434234", lon: "233.46353252" },
        { lat: "3.23434234", lon: "233.46353252" },
        { lat: "3.23434234", lon: "233.46353252" }
      ]
    };
  }
  render() {
    let { data } = this.state;

    return (
      <div>
        {data.map(data => {
          return `${data.lat},${data.lon}|`;
        })}
      </div>
    );
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react"></div>

Here is the working jsFiddle

Hope it helps :)

edited Nov 10, 2019 at 13:20

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Nov 10, 2019 at 12:50

Arun AK

4,3902 gold badges26 silver badges48 bronze badges

1 Comment

adiga Over a year ago

How do I create a React Stack Snippet with JSX support?

Collectives™ on Stack Overflow

Convert array data into a string - reactjs

6 Answers 6

Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related