Sending an array of dictionary objects to a JavaScript function

Question

Sending an array of dictionary objects to a JavaScript function

I have a situation where I need to pass a large amount of data stored in an NSArray containing NSDictionary objects to a JavaScript function using a webview and the method:

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script

My inquiries are:

How can I properly format my arguments at the caller end so that JavaScript can interpret them?
How do I retrieve these arguments in JavaScript? Specifically, what should the function signature look like and how can I access the key-value pairs of dictionary objects within the array in the JavaScript function?

I am not very experienced with JavaScript, so please forgive me if this question seems too vague. I hope it is clear enough!

Edit: I stumbled upon this thread which mentions that passing NSDictionary objects to JavaScript functions is not feasible. So, how can we accomplish this?

Thanks & Regards, Raj

javascript cocoa cocoa-touch uiwebview iphone

Answer 1

Answer №1

When passing parameters to

-stringByEvaluatingJavaScriptFromString:

, it is important to serialize them as a string. A convenient method is to convert the parameters to JSON using one of the available Cocoa JSON libraries. Once serialized, you can include this JSON string in your JavaScript code like so:

NSString *json = [serialize JSON here];
NSString *scriptString = [NSString stringWithFormat:@"doSomething(%@)", json];

Within the JSON representation, NSDictionaries will be transformed into JavaScript Objects, allowing you to access their elements using syntax such as array[5].someKey(or array[5]["some key"]).

Answer 2

When passing parameters to

-stringByEvaluatingJavaScriptFromString:

, it is important to serialize them as a string. A convenient method is to convert the parameters to JSON using one of the available Cocoa JSON libraries. Once serialized, you can include this JSON string in your JavaScript code like so:

NSString *json = [serialize JSON here];
NSString *scriptString = [NSString stringWithFormat:@"doSomething(%@)", json];

Within the JSON representation, NSDictionaries will be transformed into JavaScript Objects, allowing you to access their elements using syntax such as array[5].someKey(or array[5]["some key"]).

Answer 3

Answer №2

If you wanted to, you could dismantle them and piece them back together, just like this individual seems to be doing...

function stringToNSString(str) {
  return ['@"',str,'"'].join('');
}
function numberToNSNumber(num) {
  return ['[NSNumber numberWithLong:',num,']'].join('');
}
function booleanToNSNumber(bool) {
  return ['[NSNumber numberWithBool:',(bool ? 'YES' : 'NO'),']'].join('');
}

function nullToNSNull(){
  return '[NSNull null]';
}

function arrayToNSArray(array){
  var lines = _(array).map(function(value){
    var convertedValue;
    if (_(value).isString()) {
      convertedValue = stringToNSString(value);
    } else if (_(value).isNumber()) {
      convertedValue = numberToNSNumber(value);
    } else if (_(value).isBoolean()) {
      convertedValue = booleanToNSNumber(value);
    } else if (_(value).isNull()) {
      convertedValue = nullToNSNull();
    } else if  (_(value).isArray()) {
      convertedValue = arrayToNSArray(value);
    } else if  (typeof value === 'object') {
      convertedValue = objectToNSDictionary(value);
    }
    return convertedValue;
  }).map(function(value){
    return value + ', ';
  });
  lines.unshift('[NSArray arrayWithObjects:');
  lines.push('nil]');
  return lines.join('');
}
function objectToNSDictionary(obj){
  var lines = _(obj).map(function(value,key){
    var convertedValue;
    if (_(value).isString()) {
      convertedValue = stringToNSString(value);
    } else if (_(value).isNumber()) {
      convertedValue = numberToNSNumber(value);
    } else if (_(value).isBoolean()) {
      convertedValue = booleanToNSNumber(value);
    } else if (_(value).isNull()) {
      convertedValue = nullToNSNull();
    } else if  (_(value).isArray()) {
      convertedValue = arrayToNSArray(value);
    } else if  (typeof value === 'object') {
      convertedValue = objectToNSDictionary(value);
    }
    return [convertedValue,stringToNSString(key)];
  }).map(function(valueKey){
    valueKey.push('');
    return valueKey.join(',');
  });
  lines.unshift('[NSDictionary dictionaryWithObjectsAndKeys:');
  lines.push('nil]');
  return lines.join('\n');
}

Answer 4

If you wanted to, you could dismantle them and piece them back together, just like this individual seems to be doing...

function stringToNSString(str) {
  return ['@"',str,'"'].join('');
}
function numberToNSNumber(num) {
  return ['[NSNumber numberWithLong:',num,']'].join('');
}
function booleanToNSNumber(bool) {
  return ['[NSNumber numberWithBool:',(bool ? 'YES' : 'NO'),']'].join('');
}

function nullToNSNull(){
  return '[NSNull null]';
}

function arrayToNSArray(array){
  var lines = _(array).map(function(value){
    var convertedValue;
    if (_(value).isString()) {
      convertedValue = stringToNSString(value);
    } else if (_(value).isNumber()) {
      convertedValue = numberToNSNumber(value);
    } else if (_(value).isBoolean()) {
      convertedValue = booleanToNSNumber(value);
    } else if (_(value).isNull()) {
      convertedValue = nullToNSNull();
    } else if  (_(value).isArray()) {
      convertedValue = arrayToNSArray(value);
    } else if  (typeof value === 'object') {
      convertedValue = objectToNSDictionary(value);
    }
    return convertedValue;
  }).map(function(value){
    return value + ', ';
  });
  lines.unshift('[NSArray arrayWithObjects:');
  lines.push('nil]');
  return lines.join('');
}
function objectToNSDictionary(obj){
  var lines = _(obj).map(function(value,key){
    var convertedValue;
    if (_(value).isString()) {
      convertedValue = stringToNSString(value);
    } else if (_(value).isNumber()) {
      convertedValue = numberToNSNumber(value);
    } else if (_(value).isBoolean()) {
      convertedValue = booleanToNSNumber(value);
    } else if (_(value).isNull()) {
      convertedValue = nullToNSNull();
    } else if  (_(value).isArray()) {
      convertedValue = arrayToNSArray(value);
    } else if  (typeof value === 'object') {
      convertedValue = objectToNSDictionary(value);
    }
    return [convertedValue,stringToNSString(key)];
  }).map(function(valueKey){
    valueKey.push('');
    return valueKey.join(',');
  });
  lines.unshift('[NSDictionary dictionaryWithObjectsAndKeys:');
  lines.push('nil]');
  return lines.join('\n');
}

Answer 5

Answer №3

After gaining more knowledge, I now consider that this (JSONKit on GitHub) may be a superior solution. JSONKit offers mappings of primitive types to Objective-C Foundation classes:

╭───────────────┬─────────────────────╮
│  JSON         │  Objective -C       │
├───────────────┼─────────────────────┤
│  true|false   │  NSNull             │
├───────────────┼─────────────────────┤
│  Number       │  NSNumber           │   
├───────────────┼─────────────────────┤
│  String       │  NSString           │
├───────────────┼─────────────────────┤
│  Array        │  NSArray            │
├───────────────┼─────────────────────┤
│  Object       │  NSDictionary       │
╰───────────────┴─────────────────────╯

In JSONKit, Objects can be viewed as Associative Arrays, Key / Value Hash Tables, Maps, or Dictionaries, etc.

It is mentioned that JSONKit utilizes Core Foundation internally and assumes equivalence between Core Foundation and Foundation for base types, such as CFString ≡ NSString. Additionally, it is noted that JSONKit is not considered ARC-safe.

Answer 6

After gaining more knowledge, I now consider that this (JSONKit on GitHub) may be a superior solution. JSONKit offers mappings of primitive types to Objective-C Foundation classes:

╭───────────────┬─────────────────────╮
│  JSON         │  Objective -C       │
├───────────────┼─────────────────────┤
│  true|false   │  NSNull             │
├───────────────┼─────────────────────┤
│  Number       │  NSNumber           │   
├───────────────┼─────────────────────┤
│  String       │  NSString           │
├───────────────┼─────────────────────┤
│  Array        │  NSArray            │
├───────────────┼─────────────────────┤
│  Object       │  NSDictionary       │
╰───────────────┴─────────────────────╯

In JSONKit, Objects can be viewed as Associative Arrays, Key / Value Hash Tables, Maps, or Dictionaries, etc.

It is mentioned that JSONKit utilizes Core Foundation internally and assumes equivalence between Core Foundation and Foundation for base types, such as CFString ≡ NSString. Additionally, it is noted that JSONKit is not considered ARC-safe.

Sending an array of dictionary objects to a JavaScript function

Answer №1

Answer №2

Answer №3

Similar questions

Application suddenly crashes due to a severe issue: FATAL EXCEPTION: java.lang.RuntimeException, preventing the activity from starting

"An error has occurred stating that the header is not defined in

Steps for automatically retrying a failed expect statement in Jest

React: Selecting Component Name Based on Provided Property

Building an array from scratch in Angular

Creating routes in JavaScript to split an object like a tree: a comprehensive guide

Secure login system featuring self-contained HTML and Javascript functionalities

``I am having trouble getting the Bootstrap carousel to start

Code-based document editing with CouchBase

Selenium, scrolling through web pages

I am facing an issue where an AJAX post to Express is not returning any data to req.query. I have tried various solutions but nothing seems to

Determine the presence of a Facebook user by using JavaScript

Troubleshooting: CSS Styles not loading when passed as property in MUI withStyles

Combining JSON objects to form a new object within a JSON object using JavaScript

Is your Angular5 service failing to transmit data?

The login form is experiencing issues with submission when utilizing the submitFormHandler in ReactJS

Express.js routes are malfunctioning with jade/pug, causing frequent crashes and routing errors

Is the NPM package not being imported? How exactly is it being utilized?

Passing props from Vue3 to a component being rendered through RouterView

Utilize a React function to incorporate an external link