jQuery to read .txt file but grab specific data

Question

I'm trying to get and read data from a .txt file and then display the data within HTML.

I'm currently using the following code to print each line of the .txt file:

$.get('assets/test.txt', function(data) {
    var lines = data.split("\n");
    $.each(lines, function(n, elem) {
        $('#container').append('<div>' + elem + '</div>');
    });
});

This obviously prints out every single line of the .txt file. Whereas I would like to grab only specific data from the .txt file. For example this is what the .txt file looks like.

{
"header": "This is me doing a test",
    "menu": [{
        "title":"Home","url":"index.html"
        }, {
            "title":"Page 1",
            "url":"page2.html"
        },{
            "title":"Page 2",
            "url":"page2.html",
            "submenu": [{
                "title":"SubPage 1",
                "url":"subpage1.html"
            },{
                "title":"SubPage 2",
                "url":"subpage2.html"
            }]
        },{
            "title":"Contact",
            "url":"contact.html"
        }
    ],
    "title": "Welcome to our homepage",
    "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra sit amet ante at commodo. Sed tincidunt rhoncus fermentum. Donec fermentum volutpat est, a interdum odio scelerisque non. Nullam facilisis magna ac ipsum sollicitudin accumsan. Sed id dui adipiscing, condimentum magna non, molestie ipsum. Donec varius massa eget justo vulputate rhoncus. Integer laoreet turpis id magna rutrum sodales. Nullam eu mauris hendrerit, vulputate nisi ut, condimentum metus. Donec eros ligula, facilisis ac mi a, accumsan vestibulum tortor. Morbi tellus felis, tempor non mi ac, viverra porta lorem. Phasellus dignissim, mauris id vulputate malesuada, tortor metus placerat justo, bibendum vehicula velit magna in leo. Sed condimentum tortor ac ipsum ultricies, quis tristique massa malesuada. Vivamus vitae congue felis. Etiam dictum aliquet felis. Sed euismod in sem eu semper. Nam pulvinar nisl nisi, venenatis bibendum leo lobortis vel.<\/p><p>Nulla pharetra odio non leo sollicitudin, vel semper lorem sagittis. Pellentesque viverra pulvinar elementum. Donec pulvinar consequat augue. Aenean vitae libero sit amet quam faucibus pulvinar ac sit amet nibh. Fusce venenatis magna nulla. Curabitur dignissim justo eu purus pharetra suscipit. Donec tempus eros eget cursus vestibulum.<\/p>",
    "footer": "Copyright &copy; 2019"
}

How can I grab only the text This is me doing a test after "header": and append it to my h1 with my HTML markup?

This is my HTML below:

<h1></h1>

  <ul id="menu">
    <li></li>
    <li>
      <ul>
        <li></li>
        <li></li>
      </ul>
    </li>
    <li></li>
  </ul>

  <h2></h2>
  <p></p>

  <div id="footer">
    <p></p>
  </div>

I know I could manually type all that data in but I need to import it via the .txt file.

Answer 1

Yes, you can, using JSON.stringify and JSON.parse:

$.get('assets/test.txt', function(data) {
    var obj = JSON.parse(data);
    var headerText = obj["header"];
    $("h1").text(headerText);
});