Как отрендерит JSON объекта полученный по API?

Question

[EEM]

Друзья, подскажите. Есть такой JSON объект полученный от сервера. Мне надо выводить по ключу, например {s1_h1_text}. Как это лучше сделать?

{
	"text": {
			"s1_h1_text": {
					"id": 1,
					"text": "заголовок 1-го уровня",
					"lang_id": 1
			},
			"s1_h2_text": {
					"id": 2,
					"text": "заголовок 2-го уровня",
					"lang_id": 1
			},
			"s1_h3_text": {
					"id": 3,
					"text": "заголовок 3-го уровня",
					"lang_id": 1
			}
	}
}

Спасибо!

Comments

[0xD34F]

Друзья, подскажите.

Открыл вопрос, думал подсказать, а тут такое. Мы с вами не друзья, так что помогать вам не буду.

Спасибо!

Пожалуйста.

[Timur Kostenko]

0xD34F, странный вы

Answer 1

[Timur Kostenko]

Так и выводи да
const {s1_h1_text, s1_h2_text, s1_h3_text} = text;

Comments

[EEM]

Спасибо! А как можно выводить текст оттуда?

[Timur Kostenko]

EEM, если у вас тянутся данные в useeffect, то компонент будет рендерится 2 раза, в первый раз данные undefined и нужна проверка на наличие этих свойств, затем они подставляются. Попробуй так

<h1 className="main-title">{s1_h1_text?.text}</h1>
/* эквивалент */
<h1 className="main-title">{s1_h1_text && s1_h1_text.text}</h1>

[EEM]

Timur Kostenko, Спасибо!

Answer 2

[feniksdv]

а вы как намерены его получать по ссылки? Т.е. приложение постучалось по ссылке и получило json?

Comments

[EEM]

да, получил: console.log('text',JSON.stringify(text))
Выводить:

{"s1_h1_text":{"id":1,"text":"Заголовок 1-го уровня","lang_id":1},"s1_h2_text":{"id":2,"text":"Заголовок 2-го уровня","lang_id":1},"s1_h3_text":{"id":3,"text":"Заголовок 3-го уровня","lang_id":1}}

[Роман]

feniksdv, не путайте автора, разве имеет хоть какое то значение в контексте вопроса то как именно он получил JSON с данными??? Это риторический вопрос, и правильный ответ "Нет, не имеет" так что повторюсь, не путайте автора.

[feniksdv]

Роман, причем тут путать... я спросил как получает, если по ссылке, то я знаю как его разобрать, сам на днях этим мучался, вы бы лучше ему решение подсказали, а не лили воду!

Я сам новичок и у меня есть решение, но если только получаешь по ссылке, если по другому его загружаешь, допустим через файл то я в душе не чаю как решить его проблему.

[feniksdv]

EEM, ага я понял короче я делал так, с начала формировал саму ссылку

package ru.ls;

import android.net.Uri;

import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.Scanner;

public class NetworkUtils {

    /*************************************************************
     * Генирируем ЮРЛ по ID пользователя и  ....
     ************************************************************/

    //переменые для составлении ссылки
    public static final String API_URL_BASE = "https://eintel.arttopia.ru/";
    public static final String API_METOD = "search.php";
    public static final String API_USER_ID = "id";
//  public static final String API_TOKEN = "access_token";

//Собираем ссылку
    public static URL generateURL (String userId, String phoneId){
        Uri builtUri = Uri.parse(API_URL_BASE + API_METOD)
                .buildUpon()
                .appendQueryParameter(API_USER_ID, userId)
//             .appendQueryParameter(API_VERSION, "5.120")
                .build();
        URL url = null;
        try {
            url = new URL(builtUri.toString());
        } catch (MalformedURLException e) {
            e.printStackTrace();
        }
        return url;
    }

    //для того чтобы убрать перенос строк и сделать URl одной строкой
    public static String getResponseFromURL (URL url) throws IOException {
        HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
        try {
            InputStream in = urlConnection.getInputStream();

            Scanner scanner = new Scanner(in);
            scanner.useDelimiter("\\A");

            boolean hasInput = scanner.hasNext();

            if(hasInput){
                return scanner.next();
            } else {
                return null;
            }
        } finally {
            urlConnection.disconnect();
        }
    }
}

Ссылка готова, дальше запускаем её не в основном потоке через AsyncTask и получаем json

//JSON
    class QueryTask extends AsyncTask<URL, Void, String> {

        @Override
        protected String doInBackground(URL... url) {
            String response = null;
            try {
                response = getResponseFromURL(url[0]);
            } catch (IOException e) {
                e.printStackTrace();
            }
            return response;
        }

//вот тут вот то что вы хотели разбираем сам json
      //JSON
    class QueryTask extends AsyncTask<URL, Void, String> {

        @Override
        protected String doInBackground(URL... url) {
            String response = null;
            try {
                response = getResponseFromURL(url[0]);
            } catch (IOException e) {
                e.printStackTrace();
            }
            return response;
        }


        @Override
        protected void onPostExecute(String response) {
            //Log.d(TAG,"response======"+response);
            try {
                //в response приходит Json
                JSONObject jsonResponse = new JSONObject(response); //создаем Объект
                // Создаем масив
                JSONArray userInfoVKFNO = jsonResponse.getJSONArray("s1_h1_text");
                JSONObject userInfoVKFNO_ = userInfoVKFNO.getJSONObject(0);

                id = userInfoVKFNO_.getString("id"); 
                text = userInfoVKFNO_.getString("text");
                lang_id = userInfoVKFNO_.getString("lang_id");

            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
    }

Чтобы работало с моим кодом без правок, вам нужно переделать ваш джейсон, привести его к такому виду.

{"s1_h1_text":[{"id":"1","text":"Заголовок 1-го уровня","lang_id":"1"}]}

[feniksdv]

EEM, если не понятно моё описание, то вот ссылка, делал я по этому видео https://www.youtube.com/watch?v=erfI47ZDoIg&t=429s

[EEM]

feniksdv, Cпасибо! Для новичка пока не понятно, со временем изучу