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?

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?

• javascript
• arrays
• reactjs
• tostring

• 5 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 Commented Nov 10, 2019 at 12:44

6 Answers 6

You can use reduce

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

console.log(stringData)

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.

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

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

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.

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 :)