Как собрать и проанализировать данные JSON в HTML - PullRequest
Новая
       6

Как собрать и проанализировать данные JSON в HTML

0 голосов
/ 05 ноября 2019

В конечном итоге я хочу создать файл HTML, который будет выполнять следующие задачи. Дело в том, что мне нужно, чтобы это было все включено в фрагмент / файл HTML.

  1. Выполните вызов API GET для серверной CMS (т. Е. Drupal). Этот вызов API возвращает следующие данные JSON для определенного элемента содержимого: 
{
    "jsonapi": {
        "version": "1.0",
        "meta": {
            "links": {
                "self": {
                    "href": "http://jsonapi.org/format/1.0/"
                }
            }
        }
    },
    "data": {
        "type": "node--espot_html",
        "id": "fbaab7dd-09c2-4aa0-852d-4b9462074a45",
        "attributes": {
            "drupal_internal__nid": 1,
            "drupal_internal__vid": 11,
            "langcode": "en",
            "revision_timestamp": "2019-10-31T13:29:29+00:00",
            "revision_log": null,
            "status": true,
            "title": "Razor Hero Image",
            "created": "2019-10-28T16:24:20+00:00",
            "changed": "2019-10-31T13:29:29+00:00",
            "promote": true,
            "sticky": false,
            "default_langcode": true,
            "revision_translation_affected": true,
            "path": {
                "alias": "/razor-hero",
                "pid": 1,
                "langcode": "en"
            },
            "body": {
                "value": "<div class=\"jns-hero-image jns-hero-image-message-left\" id=\"hero_slideshow\"><img alt=\"Clean Shave\" data-entity-type=\"file\" data-entity-uuid=\"fbc875d0-ef17-4813-981c-22a29e42c44f\" src=\"/sites/default/files/inline-images/dont-shave-2.jpg\" />\r\n<div class=\"grid-container\">\r\n<div class=\"grid-x grid-padding-x\">\r\n<div class=\"small-12 medium-8 cell hero-message\">\r\n<div>\r\n<h1 class=\"text-hero text-hero-left\">Get a Much Better<br />\r\nShave</h1>\r\n\r\n<p>Fewer things look and feel better than a clean shave!</p>\r\n<a>SHOP NOW</a></div>\r\n</div>\r\n</div>\r\n</div>\r\n</div>\r\n",
                "format": "full_html",
                "processed": "<div class=\"jns-hero-image jns-hero-image-message-left\" id=\"hero_slideshow\"><img alt=\"Clean Shave\" data-entity-type=\"file\" data-entity-uuid=\"fbc875d0-ef17-4813-981c-22a29e42c44f\" src=\"/sites/default/files/inline-images/dont-shave-2.jpg\" /><div class=\"grid-container\">\n<div class=\"grid-x grid-padding-x\">\n<div class=\"small-12 medium-8 cell hero-message\">\n<div>\n<h1 class=\"text-hero text-hero-left\">Get a Much Better<br />\nShave</h1>\n\n<p>Fewer things look and feel better than a clean shave!</p>\n<a>SHOP NOW</a></div>\n</div>\n</div>\n</div>\n</div>\n",
                "summary": ""
            }
        },
        "relationships": {
            "node_type": {
                "data": {
                    "type": "node_type--node_type",
                    "id": "837a5cbe-f8fe-4c03-a613-2092dff1168e"
                },
                "links": {
                    "self": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/relationships/node_type?resourceVersion=id%3A11"
                    },
                    "related": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/node_type?resourceVersion=id%3A11"
                    }
                }
            },
            "revision_uid": {
                "data": {
                    "type": "user--user",
                    "id": "c0d80edb-325a-4ad7-9be3-bc9dc32ed878"
                },
                "links": {
                    "self": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/relationships/revision_uid?resourceVersion=id%3A11"
                    },
                    "related": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/revision_uid?resourceVersion=id%3A11"
                    }
                }
            },
            "uid": {
                "data": {
                    "type": "user--user",
                    "id": "c0d80edb-325a-4ad7-9be3-bc9dc32ed878"
                },
                "links": {
                    "self": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/relationships/uid?resourceVersion=id%3A11"
                    },
                    "related": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/uid?resourceVersion=id%3A11"
                    }
                }
            }
        },
        "links": {
            "self": {
                "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45?resourceVersion=id%3A11"
            }
        }
    },
    "links": {
        "self": {
            "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45"
        }
    }
}

Затем я ищу синтаксический ответ JSON для извлечения только данных из «value»: object.

Мне нужен escapeудалено символов

Конечным результатом должно быть отображение HTML (показано ниже) в браузере: 
<div class="jns-hero-image jns-hero-image-message-left" id="hero_slideshow"><img alt="Clean Shave" data-entity-type="file" data-entity-uuid="fbc875d0-ef17-4813-981c-22a29e42c44f" src="/sites/default/files/inline-images/dont-shave-2.jpg" /><div class="grid-container"><div class="grid-x grid-padding-x"><div class="small-12 medium-8 cell hero-message"><div><h1 class="text-hero text-hero-left">Get a Much Better<br />Shave</h1><p>Fewer things look and feel better than a clean shave!</p><a>SHOP NOW</a></div></div></div></div></div>"

При успешной обработке, это то, что должно отображаться на веб-странице: Снимок экрана, если изображение отображается с помощью HTML

Вот HTML-код, который я пробовал,Мои извинения за нарушение этикета, я не знал, что это будет восприниматься как таковое. В консоли браузера отображается сообщение о том, что forEach не является допустимой функцией или этот ответ. 

'<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Ghibli App</title>

    <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
    <!-- <link href="style.css" rel="stylesheet" /> -->
  </head>
 

  <body>
    <div id="root"></div>
     <script>
	 const app = document.getElementById('root');

const container = document.createElement('div');
container.setAttribute('class', 'container');

app.appendChild(logo);
app.appendChild(container);

var request = new XMLHttpRequest();
request.open('GET', 'http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45', true);
request.onload = function () {

 // Begin accessing JSON data here
 var data = JSON.parse(this.response);
 if (request.status >= 200 && request.status < 400) {
   data.forEach(value => {
     const card = document.createElement('div');
     card.setAttribute('class', 'card');

     const h1 = document.createElement('h1');
     h1.textContent = valuable.title;

     const p = document.createElement('p');
     value.description = value.description.substring(0, 300);
     p.textContent = `${value.description}...`;

     container.appendChild(card);
     card.appendChild(h1);
     card.appendChild(p);
   });
 } else {
   const errorMessage = document.createElement('marquee');
   errorMessage.textContent = `Gah, it's not working!`;
   app.appendChild(errorMessage);
 }
}

request.send();
	 </script>
  </body>
</html>'

1 Ответ

0 голосов
/ 06 ноября 2019

В итоге получился конечный результат, который я искал: 

<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script>
const app = document.getElementById('root');

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
  
    let obj = JSON.parse(this.responseText);
	console.log(obj.data.attributes.body.value)
	app.innerHTML = obj.data.attributes.body.value.replace('src="/sites','src="http://localhost:4700/sites'); 
  }
};
xmlhttp.open("GET", "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45", true);
xmlhttp.send();

</script>
</body>
</html>
...