Storing numerous JSON records into an array by parsing them from a file

Question

Storing numerous JSON records into an array by parsing them from a file

As a beginner in JS programming, I have a question that may seem trivial. Despite hours of searching online, I haven't been able to find a solution that works for me.

I am dealing with multiple JSON feeds where each URL provides a multilayer JSON record like the examples below:

yields:

{
"LGICUS01OperationResponse": {
"ca": {
  "ca_phone_mobile": "07799 123456",
  "ca_request_id": "01ICUS",
  "ca_return_code": 0,
  "ca_dob": "11.07.1950",
  "ca_last_name": "Pandy",
  "ca_num_policies": 0,
  "ca_phone_home": "01962 811234",
  "ca_email_address": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65244b3504...">',
  "ca_house_name": "",
  "ca_policy_data": "",
  "ca_customer_num": 1,
  "ca_first_name": "Andrew",
  "ca_house_num": "34",
  "ca_postcode": "PI101OO"
}
}
}

yields:

{
"LGICUS01OperationResponse": {
"ca": {
  "ca_phone_mobile": "123",
  "ca_request_id": "01ICUS",
  "ca_return_code": 0,
  "ca_dob": "30.09.1965",
  "ca_last_name": "Tracey",
  "ca_num_policies": 0,
  "ca_phone_home": "",
  "ca_email_address": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c5e49...>',
  "ca_house_name": "Tracey Island",
  "ca_policy_data": "",
  "ca_customer_num": 2,
  "ca_first_name": "Scott",
  "ca_house_num": "",
  "ca_postcode": "TB14TV"
}
}
}

My goal is to extract the user information from these JSON records and manipulate them as an array for later use. The desired format is shown below:

{
    "rows":[
        {"ca_customer_num":1", "ca_first_name:"Andrew",...}
        {"ca_customer_num":2", "ca_first_name:"Scott",...}
    ...
    ]
}

Here is the code snippet I've been working on:

<!DOCTYPE html>
<html>
    <head>
        <title>JSON test</title>
          <script src="jquery.js" type="text/javascript"></script>      
          <script>
          var myjson = [];
          for (i = 1; i < 11; i++) {
              getCurrentJson(i);
              console.log(myjson[i].LGICUS01OperationResponse.ca.ca_phone_mobile);
          }

          function getCurrentJson(current){
            $.ajax({ 
                dataType: "json",
                url: "http://192.49.208.193:9081/ci/c/"+current,
                success: function(data){
                    myjson[current] = data;
                    console.log(myjson[current]);
                    console.log(myjson[current].LGICUS01OperationResponse.ca.ca_phone_mobile);
                }
              });       
          }
        </script>
    </head>
    <body>
    </body>
</html>

While the console outputs within the ajax function display the Object information and phone numbers correctly, the initial console output in the loop throws an error "Uncaught TypeError: Cannot read property 'LGICUS01OperationResponse' of undefined(…)". Do I need to convert data types or make any other adjustments? I also attempted to pass the myjson array to the getCurrentJson function but it didn't work.

javascript arrays json ajax

Answer 1

Answer №1

It's important to remember that AJAX requests are asynchronous

Note: see the partial example provided below (also keep in mind that not all requests have to be successful, some may fail and never reach done == total)

var myjson = [];
var total = 10;
var done = 0;

for (i = 1; i <= total; i++) {
  getCurrentJson(i);
  // at this point AJAX request haven't finished (most likely)
  //console.log(myjson[i].LGICUS01OperationResponse.ca.ca_phone_mobile);
}

function allDone() {
  console.log(myjson);
}

function getCurrentJson(current){
  $.ajax({ 
    dataType: "json",
    url: "http://192.49.208.193:9081/ci/c/"+current,
    success: function(data){
      myjson[current] = data;
      done++;
      console.log(myjson[current]);
      console.log(myjson[current].LGICUS01OperationResponse.ca.ca_phone_mobile);
      if (done == total) {
        allDone();
      }
    }
  }); 
}

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

Answer 2

It's important to remember that AJAX requests are asynchronous

Note: see the partial example provided below (also keep in mind that not all requests have to be successful, some may fail and never reach done == total)

var myjson = [];
var total = 10;
var done = 0;

for (i = 1; i <= total; i++) {
  getCurrentJson(i);
  // at this point AJAX request haven't finished (most likely)
  //console.log(myjson[i].LGICUS01OperationResponse.ca.ca_phone_mobile);
}

function allDone() {
  console.log(myjson);
}

function getCurrentJson(current){
  $.ajax({ 
    dataType: "json",
    url: "http://192.49.208.193:9081/ci/c/"+current,
    success: function(data){
      myjson[current] = data;
      done++;
      console.log(myjson[current]);
      console.log(myjson[current].LGICUS01OperationResponse.ca.ca_phone_mobile);
      if (done == total) {
        allDone();
      }
    }
  }); 
}

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

Answer 3

Answer №2

Have you ever noticed that Javascript is asynchronous, requiring you to wait for a response before continuing? It can be frustrating when your code executes before the ajax request has completed.

console.log(myjson[i].LGICUS01OperationResponse.ca.ca_phone_mobile);

If you want to prevent this issue, consider using async or handling callbacks appropriately in your code.

Check out this example on CodePen: http://codepen.io/anon/pen/gLPJNe

Answer 4

Have you ever noticed that Javascript is asynchronous, requiring you to wait for a response before continuing? It can be frustrating when your code executes before the ajax request has completed.

console.log(myjson[i].LGICUS01OperationResponse.ca.ca_phone_mobile);

If you want to prevent this issue, consider using async or handling callbacks appropriately in your code.

Check out this example on CodePen: http://codepen.io/anon/pen/gLPJNe

Storing numerous JSON records into an array by parsing them from a file

Answer №1

Answer №2

Similar questions

Ways to alter formData using jQuery

I am looking to view all products that belong to the category with the ID specified in the request, and have red-colored stocks

What are the steps to utilize chrome.tabs.onUpdated.addListener?

Pressing the reset button on the search box triggers a JQuery and HTML function

Exploring AngularJS: Utilizing limitTo and filter

Utilizing Angular 5: Enhancing ngFor with a Pipe and a Click Event

Ways to retrieve the user's IP address and provide the information in JSON format

Move a pin on Mapbox

When running collection.find().toArray(callback) in node.js with mongodb, the result is coming back

Transform the image data retrieved from an external API into the appropriate format for displaying on the webpage

Difficulties arise when working with Json data and performing searches using a for-each

Retrieving an array of various responses using Axios

Please input new items by clicking a button

Tips for effectively utilizing the useDraggable and useSortable hooks within the dnd-kit library

Issue while rendering Vuex

I need to access a directory that is outside of my current folder in Express.js

Falling rain animation in JavaScript

Ways to automatically check a checkbox using jQuery

Utilizing Ajax to send IP addresses and obtain location data

Organize every rectangle and text element in D3 into distinct groups