Grab JSON within JSON

Question

I'm not entirely sure how to word this properly, but, I want to be able to parse the "MoreData" json file.

Currently how I have it setup is.. I have a simple data table with first and last name and it reads from a external git JSON file. When I click on a row, depending on who I click on, it grabs the correct JSON data and opens a MODAL in bootstrap with the first and last name data from the JSON. However, I want to also inject into the same MODAL with data from the "MoreData" string. Is this possible to do?

  {
    "firstName": "John",
    "lastName": "Smith",
    "moreData": "https://raw.githubusercontent.com/test/test/main/jsmith-salaryinfo.json"
  },

Don't mind my spaghetti code. I'm new to this, and trying to self learn. Any help would be greatly appreciated, and if you need more information please don't hesitate to ask. Thank you in advance!

$(document).ready(function() {

  var table = $('#example').DataTable();

  table;

  $('#example').on('click', 'tr', function() {

    let firstName = table.row(this).data().firstName
    let lastName = table.row(this).data().lastName

    document.getElementById('firstName').innerHTML = firstName + '  ' + lastName;
    document.getElementById('lastName').innerHTML = firstName + '  ' + lastName;

    $('#DescModal').modal("show");

    // console.log(table.row(this).data());

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I made you a snippet. It is missing some frameworks and HTML. Also the `table;` in the middle of everything is not doing anything — mplungjan, Feb 05 '21 at 20:23

mwilson · Accepted Answer · 2021-02-05T20:46:45.487

You can use the fetch api to invoke a GET request to that URL. You can then handle the response however you want and do what you will with the json returned.

The URL you have in your question returns a 404 so the below example is using json placeholder API.

If you have an array of users you want to iterate through and return all the data for those users, there are different ways to do it. I would recommend the Promise.all approach as it allows you to execute everything in parallel and wait for them all to complete and do something with the results.

const people = [
  {
    userId: 1
  },
  {
    userId: 2
  },
  {
    userId: 3
  },
  {
    userId: 4
  }
];

// Simple iterator
for (let i = 0; i < people.length; i++) {
  const person = people[i];
  fetch(`https://jsonplaceholder.typicode.com/users/${person.userId}`)
  .then(response => response.json())
  .then(json => console.log(json))
}


// Using Promise.all
const promises = people.map(p => fetch(`https://jsonplaceholder.typicode.com/users/${p.userId}`).then(r => r.json() ) );
Promise.all(promises).then(json => console.log(json));

Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Grab JSON within JSON

1 Answers1