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

What could be the reason for the 'tsc' command not functioning in the Git Bash terminal but working perfectly in the command prompt?

Attempting to transfer various variables from several windows using AJAX

Implementing Vue modal within a Laravel 5.2 foreach loop

How can Firebase-RealtimeDatabase be configured to allow for user registration and login?

I'm curious if it's possible to utilize Raspberry Pi GPIO pins within a JavaScript frontend

"What could be the reason for web3.eth.getAccounts() method returning an empty array when used with console.log

Utilizing v-for in Vue with TypeScript to generate multiple checkboxes

The keys within a TypeScript partial object are defined with strict typing

PHP warning: Notice: Offset not defined

Using AngularJS to compare values against user input to determine if they are greater or lesser

broadcast updated $rootScope

Ways to update the DOM once a function has been executed in VUE 3 JS

What is the best way to link labels with input fields located separately in Angular?

Is there a workaround in TypeScript to add extra details to a route?

Rails issue: Active Model Serializer searching for incorrect serializer

Angular component injected with stub service is returning incorrect value

What is the process of directing to another HTML page within the same Express controller script?

Leverage the power of Angular CLI within your current project

A customizable and adaptable Tetris-inspired CSS design perfect for any screen size

"Exploring the process of making a REST call from an Angular TypeScript client to