Как правильно читать фрагменты данных из массивов внутри массива из JSON Response и не только в интерфейсе?

Question

[Сергей Золотарёв]

Добрый день!

Недавно я реализовал веб-сервис, который в формате JSON генерирует списки пустых и доступных аттрибутов данных, а клиентская часть сайта их читает. И списки объединяются в одно тело ответа и его первоначальный вариант после запуска сервиса: [["test"],"DBA Service Error!"]

Какие значения массива означают тот или иной фрагмент(в кажом фрагменте используются данные из различных используемых в проекте СУБД)?:

• Первое значение состоит из массива с пустыми аттрибутами данных.
  
• А второе тоже из массива, но отвечающее за список непустых доступных аттрибутов. Но массива не увидите, так как такого списка нет в одном из СУБД! Но увидите реализованную мной ошибку из её сути.
  

В клиентской части реализовал отдельный React-компонент, который занимается чтением того самого респонза и компилятор мне принёс вот такой сюрприз:

TypeError: Cannot read properties of null (reading '1')

В коде я реализовал чтение и обработку ошибок из каждого фрагмента в респонзе, если имеются сбои на используемых серверах СУБД или просто там нет данных. Сама проблема коснулась списка пустых аттрибутов и компонент не работает из-за этого. Как решить данную проблему? Код проблемного компонента в комментариях к данному вопросу и заранее вам спасибо!

Comments

[Сергей Золотарёв]

Код проблемного React-компонента, по которому был задан вопрос:

const showCurrentTableColumnsCount = (table) => {
	let countContent,
		qpm = {
				parameters: {
						attribute: table
				}
		};
		
	 var fd = new FormData();
	 fd.append('svcQuery', JSON.stringify(qpm));
	  
	 const requestOptions = {
        method: 'POST',
        body: fd
	 };
	  
	 var r = fetch('/admin/api/dataServices/filters/TableColumns/show', requestOptions);
	 
	 if(r.ok()){
		let res = r.json(),
			count = res[0].columncount;
			
		if(count === 0){ countContent = <footer>Not filters</footer>; }
		if(count === 1){ countContent = <footer>{count} filter</footer>; }
		if(count > 1){ countContent = <footer>{count} filters</footer>; }
		
	 }
	
	 return countContent;
}

class List extends React.Component{
  constructor(props){
	  super(props);
	  this.state = {
		  listSheet: null
	  };
  }
  JQueryCall(){ $('#attributes-list > .list-cont').click(redirectToAttribute); }
  componentDidMount(){
	  
	  const requestOptions = {
        method: 'GET'
	  };
	  
	  fetch('/admin/api/dataServices/filters/Attributes/show', requestOptions)
        .then(response => this.setState({ listSheet: response.json() }) )
		.catch(error => {
			alert('Response error!');
			console.log(error);
		});
        
      this.JQueryCall();
  }
  render(){
	
	if(this.state.listSheet[1] === 'DBA Service Error' || !Array.isArray(this.state.listSheet[1])){
		alert('Avabillity attributes data empty or problem!');
	}
				
	if(this.state.listSheet[0] === 'DBA Service Error' || !Array.isArray(this.state.listSheet[0])){
		alert('Empty attributes data empty or problem!');
	}
	
    return (
      <React.Fragment>
		<h2>Avabillity attributes</h2>
        <section id="attributes-list">{
				this.state.listSheet[1].map(r => {
					return (
						<div className="list-cont">
							<header>{ r.name }</header>
							{ showCurrentTableColumnsCount(r.name) }
						</div>
					)
				})
		}</section>
		<h2>Empty attributes</h2>
		<section id="attributes-list">{
				this.state.listSheet[0].map(r => {
					return ( <div className="list-cont"><header>{ r }</header></div> )
				})
		}</section>
      </React.Fragment>
    );
  }
}

[WbICHA]

Сергей Золотарёв, стоит почитать про асинхронность, все проблемы из-за непонимания именно её.

П.с.: это код для пыток? На него даже смотреть больно.

[Сергей Золотарёв]

WbICHA, код не для пыток, а для помощи в решении данного вопроса!