Преобразовать данные массива в строку - реагировать

Question

У меня есть массив с несколькими объектами в нем. Чтобы показать вам структуру массива, она выглядит так:

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"}

Я хочу создать строку, используя данные этого массива. Мне нужно создать строку, которая выглядит следующим образом. Мои данные хранятся в состоянии this.state.destinationLocation

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

Как мне достичь этого результата?

Answer 1

Вы можете использовать reduce

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

console.log(stringData)

Answer 2

Самый простой способ сделать это - использовать Array#map и Array#join:

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

Также см. разрушение объекта и литералы шаблона .

Answer 3

Вот что я бы предложил:

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

Answer 4

Я думаю, * метод 1001 * - это путь.

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

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

console.log(reducedArray)

Рабочий пример JS Bin: https://jsbin.com/jawiziduxo/edit?js,console,output

Answer 5

Мы можем сделать что-то вроде этого:

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>

Вот рабочая jsFiddle

Надеюсь, это поможет:)

Answer 6

Ну, вы можете просто перебрать записи и добавить в строку ..

Вот псевдокод того, что вам нужно сделать

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

Тогда у вас будет string переменная, содержащая то, что вам нужно.