How can I make js objects' content be pulled in from an html file?

I have a few js objects containing data that I would like to make it so that the owner can modify from an html file.

In other words, the js object lives in its own js file, but I'm afraid the person editing the data in objects may delete/update the actual code...basically I would like to make it idiot proof. So I'm thinking of having the data live in an html file or even a .txt file to make editing super easy.

Basically anything like A1, A2, A3, A4, B1, B2, etc etc etc... I would like those to live in a separate file in the simplest way possible. Any ideas?

Here is a sample of the objects I have:

var objOne = [
  {first: 'A1', second: 'A2', third: 'A3', fourth: 'A4'},
  {first: 'B1', second: 'B2', third: 'B3', fourth: 'B4'},
  {first: 'C1', second: 'C2', third: 'C3', fourth: 'C4'}
];


var objTwo = [
  {first: 'D1', second: 'D2', third: 'D3', fourth: 'D4'},
  {first: 'E1', second: 'E2', third: 'E3', fourth: 'E4'},
  {first: 'F1', second: 'F2', third: 'F3', fourth: 'F4'}
];


$('.div span').html( objOne[0].fourth + ' >> ' + objTwo[2].third);

<div class="div">Element: <span></span></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Thank you all.

Sergio