Отображение многомерного массива в файле Json с ReactJS - PullRequest
Новая
       8

Отображение многомерного массива в файле Json с ReactJS

0 голосов
/ 12 марта 2019

Только что начал с Reactjs, и я ищу наиболее эффективный код для отображения массива ниже в виде таблицы, как описано в разделе 'render'.Я использовал .map для итерации, но пока безуспешно.

В приведенном ниже примере кода я получил данные из Url из узла и затем выразил их на localhost.Из моего приложения React я пытаюсь получить данные с локального хоста, но из-за сложного массива я не могу пройти через него. Как мне этого добиться?

Спасибо 

React.js
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      items:[],
      isloading:false,
     }
  }
  componentDidMount() {

      fetch('http:localhost:5000/api/hello')
      .then((response)=>{
        return response.json();
      })
      .then((data)=>{
        this.setState({
          items:data
        })
      })
  }
  render() { 
    var  isloading   = this.state;
    var items = this.state
    if(!isloading)
    {
      return(<div>Loading...</div>)
    }
    
    if(items)
    {
      return(
        <div>
          {
            this.state.items.map((item, i)=>
                     
              <div>
              {
                (typeof(item.body)=='object')?
                <div> 
                  {
                    item.body.map((subrowdata,k)=>
                    <div>
                      {
                        (typeof(subrowdata.info)=='object')?
                        <div>
                          {subrowdata.last_updated}
                          </div>
                          :
                          null
                      }
                      </div>
                    )
                  }
                </div>
                :
                null
              }
              </div>
            )
          }
        </div>
      )
    }

  }
}

export default App;
Node-express server.js

const express = require('express');1
const bodyParser = require('body-parser');

const app = express();
const port = process.env.PORT || 5000;

var request = require("request")

var url = ""

request({
    url: url,
    json: true
}, function (error, response, body) {
  app.get('/api/hello', (req, res) =>{
    res.send({body});
  })
})
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
app.post('/api/world', (req, res) => {
  console.log(req.body);
  res.send(
    `data received: ${req.body.post}`,
  );
});

app.listen(port, () => console.log(`Listening on port http://localhost:${port}/api/hello`));
preview of Json file
body:{	
  ->info:{	
      tax	"0"
      discount	"0"
      minimum_spend	"0"
      delivery_charges	"0"
      last_updated	"2 months 3 weeks ago"
}
->items:{
0:{name: 'sdasd',
   id:1}
1:{name: 'sdasd',
   id:1}
2:{name: 'sdasd',
   id:1}

}
}

примечание: «тело является родительским для информации и элемента, и тело, и информация имеют тип« объект », а элемент - тип массива

...