Loop through the JSON data and display any empty strings

Question

Loop through the JSON data and display any empty strings

I encountered an issue while trying to convert an object string from a list of arrays using the JSON.parse method. Despite successfully converting the object string to an object, it appears empty when used within ng-repeat.

Jade

.item.col-md-4(ng-repeat='p in searchData | filter: paginate | orderBy: sortKey ')
   // `p` represents an object of strings, such as "{id:2, name:'abel'}"
   - var property = JSON.parse(""{{ p }}""); // Error occurs at this line
   +AddPropertyCard(property)

SearchData

[{id:0, name:"abel"},{id:1, name:"julia"}]

Error

var property = JSON.parse("");

Unexpected token { in JSON at position 1

javascript angularjs json pug

Answer 1

Answer №1

Update 1 :

The variable 'p' appears to be an object.

You need to access it using dot notation. For example, {{p.id}} or {{p.name}}. This will display the respective values.

JSON.parse requires a stringified object in order to parse it.

// Let's create a simple object in JavaScript
var notStringObj = {
    "name": "John",
    "age": 30,
    "city": "New York"
};
console.log("JavaScript Object", notStringObj);

// Let's stringify (convert to a string) the object
var stringObj = JSON.stringify(notStringObj);
console.log("JavaScript Stringified Object", stringObj);

// The following code is used to decode this object

// This will give you the expected result - a JavaScript object
var obj1 = JSON.parse(stringObj);

// This will throw an error - Unexpected token { in JSON at position 1
// Because this was a plain object and not a string
// JSON.parse requires a stringified object in order to parse it
var obj2 = JSON.parse(notStringObj)

Answer 2

Update 1 :

The variable 'p' appears to be an object.

You need to access it using dot notation. For example, {{p.id}} or {{p.name}}. This will display the respective values.

JSON.parse requires a stringified object in order to parse it.

// Let's create a simple object in JavaScript
var notStringObj = {
    "name": "John",
    "age": 30,
    "city": "New York"
};
console.log("JavaScript Object", notStringObj);

// Let's stringify (convert to a string) the object
var stringObj = JSON.stringify(notStringObj);
console.log("JavaScript Stringified Object", stringObj);

// The following code is used to decode this object

// This will give you the expected result - a JavaScript object
var obj1 = JSON.parse(stringObj);

// This will throw an error - Unexpected token { in JSON at position 1
// Because this was a plain object and not a string
// JSON.parse requires a stringified object in order to parse it
var obj2 = JSON.parse(notStringObj)

Loop through the JSON data and display any empty strings

Answer №1

Similar questions

What is the best way to stylize a date using Bootstrap-datepicker?

transform json array into a consolidated array by merging identical IDs

Can a single controller function in ASP.NET MVC4 be used to send back two arrays to the view?

What causes the "Cannot read properties of undefined" error in Vue when an array is initialized and output is still being displayed?

Steps for displaying the JSON data from Google Distance Matrix Results in a printed format

Utilizing React Native to seamlessly integrate one JavaScript function into another

How to extract a JavaScript object from an array using a specific field

Retrieve the Country Code and Display a Variety of Greetings

What is the most effective method to package a React application?

showing the upload preview and disabling automatic uploading in Dropzone with React

What is the reason for the failure of this JavaScript promise?

Application utilizing electron technology featuring various tabbed browsing windows connecting to secure websites

Struggling to get Django and AngularJS to play nice?

The comparison between AJAX and JSON passing and PHP generating HTML versus returning it

Troubleshooting Protractor in Intellij: A step-by-step guide

How to include a new variable within a JSON string using C#

'this' in Arrow functions does not have a reference to the calling context

Encountering issues with AngularJS ng-click and $http post functionality

Adding a child node before an empty node in Chrome with JavaScript Rangy

Hidden IFrame for Jquery File Upload