Возможно ли вывести выхлоп xml-js в componentDidMount?

Question

[kashcheev]

Здравствуйте!

Подскажите, пожалуйста, как "подружить" две конструкции:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }

componentDidMount() {
    const url = "";
    fetch(url)
    .then(response => response.json())
    .then(json => this.setState({ posts: json }))
  }

  render() {
    const { posts } = this.state;
    return (
      <div className="container">
        {posts.map((post) => (
          <div className="card" key={post.id}>
              #{post.id} {post.title}
              <p className="text">{post.body}</p>
          </div>
        ))}
      </div>
    );
  }
}

var convert = require('xml-js');
var xml =
'<?xml version="1.0" encoding="utf-8"?>' +
'<note importance="high" logged="true">' +
'    <title>Happy</title>' +
'    <todo>Work</todo>' +
'    <todo>Play</todo>' +
'</note>';
var result1 = convert.xml2json(xml, {compact: true, spaces: 4});
var result2 = convert.xml2json(xml, {compact: false, spaces: 4});
window.alert(result1, '\n', result2);

Возможно ли выхлоп result1, '\n', result2 поместить внутрь componentDidMount() вместо значения url, где сейчас ссылка на json?

p.s.
React ковыряю из интереса, опыт работы с JS небольшой.
Google отличный наставник, но конкретных примеров по ситуации я не нашел.

p.s.s.
Интересно решение именно средствами js, понятно, что на руках чаще всего есть нормальный json.

Comments

[Роман Александрович]

попробуйте так

import React, { Component } from 'react';
import './App.css';
var convert = require('xml-js');

var xml =
'<?xml version="1.0" encoding="utf-8"?>' +
'<note importance="high" logged="true">' +
'    <title>Happy</title>' +
'    <todo>Work</todo>' +
'    <todo>Play</todo>' +
'</note>';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }

componentDidMount() {
var result1 = convert.xml2json(xml, {compact: true, spaces: 4});
var result2 = convert.xml2json(xml, {compact: false, spaces: 4});

    const url = "";
    fetch(url)
    .then(response => response.json())
    .then(json => this.setState({ posts: json }))
  }

  render() {
    const { posts } = this.state;
    return (
      <div className="container">
        {posts.map((post) => (
          <div className="card" key={post.id}>
              #{post.id} {post.title}
              <p className="text">{post.body}</p>
          </div>
        ))}
      </div>
    );
  }
}

[kashcheev]

Роман Александрович, спасибо, что откликнулись!

is assigned a value but never used no-unused-vars

На result1 и result2. Не подскажите, в чём дело?

[Роман Александрович]

kashcheev, конечно подскажу у вас есть доступ к result1 и result2 в componentDidMount но вы их не засунули куда надо вот вам и пишут что есть переменные но вы их не используете.

[kashcheev]

Роман Александрович, вот не верю я в сглаз, но природа ироничности внушает интерес и страх.
Я к тому, что хваленый "наставник" меня по коду этой ошибки вообще в другую сторону увёл.

Старую ошибку поборол!

import React, { Component } from 'react';
import './App.css';
var convert = require('xml-js');

var xml =
'<?xml version="1.0" encoding="utf-8"?>' +
'<note importance="high" logged="true">' +
'    <title>Happy</title>' +
'    <todo>Work</todo>' +
'</note>';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }

componentDidMount() {
const result1 = convert.xml2json(xml, {compact: true, spaces: 4})
    fetch(result1)
    .then(response => response.json())
    .then(json => this.setState({ posts: json }))
  }

  render() {
    const { posts } = this.state;
    return (
      <div className="container">
        {posts.map((post) => (
          <div className="card">
              {post.title}
              <p className="text">{post.todo}</p>
          </div>
        ))}
      </div>
    );
  }
}


export default App;

Терминал ругаться перестал, а вот консоль:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Помогите добить, пожалуйста.

Answer 1

[Роман Александрович]

componentDidMount() {
    const result1 = convert.xml2json(xml, { compact: true, spaces: 4 });
    const data =  JSON.parse(result1);
    this.setState({ posts: data })
  }

Comments

[kashcheev]

Повываливались ошибки:






В данной ситуации не гуглю, подожду вашего ответа, т.к. с прошлой ошибкой поиск направил вообще не туда.

[Роман Александрович]

kashcheev, https://codesandbox.io/s/react-example-ob6bq?file=...

[kashcheev]

Роман, большое спасибо! Интересный опыт, изрядно пополнил пробелы в знаниях.
Возвращаюсь к основам, рано мне с таким играть.