JSON вывести в JS объект

Question

Очень нужна помощь, спасибо заранее

есть JSON который был выведен парсером с новосного сайта ( парсер прикрепил ниже ) сам JSON имеет такой формат ( названия файла medusa.json )

 [{
    "title": "РАЗБОР\nАмериканская компания Moderna сообщила об успешных испытаниях РНК-вакцины против коронавируса. Что в ней особенного? И что значит успешных?",
    "time": "час назад",
    "link": "https://meduza.io/feature/2020/07/17/amerikanskaya-kompaniya-moderna-soobschila-ob-uspeshnyh-ispytaniyah-rnk-vaktsiny-protiv-koronavirusa-chto-v-ney-osobennogo-i-chto-znachit-uspeshnyh",
    "img": "background-image: url(\"/image/attachment_overrides/images/005/719/574/ov/V5HqIDped5sFffpMz0zVcg.jpg\");"
},

вот парсер


const fs = require('fs');  
const puppeteer = require('puppeteer'); 
let link = 'https://meduza.io/'; 

const parseNewsWebView = async click => {   
    try { 
        let browser = await puppeteer.launch({ 
            headless: true, 
            slowMo: 0,
            devtools: false 
        });
        let page = await browser.newPage();
        await page.setViewport({
            width: 1400,
            height: 900
        });
        await page.goto(link, {
            waitUntil: 'domcontentloaded'
        });
        const selector = await page.$('div.InfoPanel-switcher');
        await selector.click();
        await page.waitForSelector('div.Chronology-wrapper');
        for (let i=0; i< click; i++){
            const button = await page.$('button.Button-root.Button-default.Button-gold')
      
        }
        let html = await page.evaluate(async () => {
            let res = [];
            let container = await document.querySelectorAll('div.Chronology-item')


            container.forEach(item => {
                let title = item.querySelector('div.ChronologyItem-header').innerText
                let time = item.querySelector('time.Timestamp-root').innerText
                let link = item.querySelector('a.ChronologyItem-link').href
                let img
                try {
                    img = item.querySelector('div.ChronologyItem-image').getAttribute('style')
                } catch (e) {
                    img = null
                }
                res.push({
                    title,
                    time,
                    link,
                    img
                })
            });

            return res;
        });

        fs.writeFile('medusa.json', JSON.stringify(html), function (err) {
            if (err) throw err
            console.log('Save medusa.JSON file')
        })
    } catch (e) {   
        console.log(e);
    }

};

parseNewsWebView(0);

вывожу так

var xhr = new XMLHttpRequest();
xhr.open('GET', 'medusa.json', false);
xhr.send();
if (xhr.status != 200) {
  // обработать ошибку
  alert( xhr.status + ': ' + xhr.statusText ); // пример вывода: 404: Not Found
} else {
  alert( xhr.responseText ); 
}

выводит все в алерте

Вопрос, как вывести структурировано информацию в блок на сайте ?

<div class="elemInfo" style=" border: 4px solid black;width: 300px;
    height: 300px; ">

        <img id="imgJSON" src="URL" alt="альтернативный текст"> //вставить ссылку с JSON

        <hr align="center" width="300" size="2" color="black" style="margin-top: 150px;" />

        <h5 id="titleJSON ">Вставить titleJSON</h5>

        <hr align="center" width="300" size="2" color="black" />
        <p><a href="">вставить linkJSON</a></p>
    </div>

Answer 1

Сначала нужно определиться что для вас является структурировано?. То есть без всяких json а просто взять сверстать некий HTML который будет у вас внутри id ='JsonInfo' и применить к нему CSS. Так вы сделаете просто некий макет, пусть пока что с информацией не из JSON.Но которая уже будет красиво отображаться на сайте. И второй шаг Нужно из json вставить данные в ваш макет.И тут методов реализации может быть множества, собрать макет html в js и вставить. Или в виде HTML он у вас уже сгенерирован на сайте на Backend и тогда нужно обращаясь к конкретным div и вставлять значения из json, так что пока не определитесь с шаблонам и как он появляется с помощью js или на Backend задача понятна, но очень много разветвленная в решении. Ибо имеет множества неизвестных моментов.

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
</head>

<body>

//
<div class="elemInfo" style=" border: 4px solid black;width: 300px;
    height: 300px; ">

    <img id="imgJSON" src="URL" alt="альтернативный текст"> //вставить ссылку с JSON

    <hr align="center" width="300" size="2" color="black" style="margin-top: 150px;" />
<!-- убрал в исходном шаблоне  <h5 id="titleJSON " пробел в конце SON " иначе можит не работать-->
    <h5 id="titleJSON">Вставить titleJSON</h5>

    <hr align="center" width="300" size="2" color="black" />
<!--    дописал в исходно шаблоне id="linkJSON" иначе добраться до узла очень длино-->
    <p><a id="linkJSON" href="">вставить linkJSON</a></p>
</div>
</body>

<script type="text/javascript">
    // в переменной типо страка пришедшая с сервера
    let b = '[{"title":"РАЗБОР\\nАмериканская компания Moderna сообщила об успешных испытаниях РНК-вакцины против коронавируса. Что в ней особенного? И что значит успешных?","time":"час назад","link":"https://meduza.io/feature/2020/07/17/amerikanskaya-kompaniya…-koronavirusa-chto-v-ney-osobennogo-i-chto-znachit-uspeshnyh","img":"background-image: url(\\"/image/attachment_overrides/images/005/719/574/ov/V5HqIDped5sFffpMz0zVcg.jpg\\");"}]'
    // конвертируем ее в объект
    let value = JSON.parse(b);

    // Выбираем элементы HTML шаблона и вставляем походящим методом способом нужные переменные
    document.getElementById("imgJSON").setAttribute("img", value[0].img);
    document.getElementById("titleJSON").textContent = (value[0].title);
    document.getElementById("linkJSON").setAttribute("href", value[0].link);


</script>
</html>

Вот код как на твоем примере ,в принципе сделаешь JSON.parse от своей переменной, полученной с сервера и далее по аналогии

БЛОГ НА HUSL

JSON вывести в JS объект

Ответы (2 шт):