Searching through a json object using typescript

Question

Searching through a json object using typescript

While attempting to retrieve JSON data from a URL, I encountered a particular issue.

The problem lies in the fact that each row in the Datarows array contains 5 rows, each row consisting of 47 cells. Out of these 47 cells in each row, I am specifically interested in just two of them:

  Cell with Key = "Title"
  Cell with Key = "Path"

So, my query is: How can I extract only the 2 cells I am interested in from each row?

The format for a cell is as follows:

Key: string;
value: string;
ValueType: string;

Below is my current implementation:

let queryUrl = "/_api/search/query?querytext='" + encodeURIComponent(searchValue) + "'&rowlimit=5";
let response = await this.props.context.spHttpClient.get(queryUrl, SPHttpClient.configurations.v1.overrideWith(spSearchConfig));
let obj = await response.json();
let Datarows = obj["PrimaryQueryResult"]["RelevantResults"]["Table"]["Rows"];

Ultimately, I aim to achieve a result that appears as follows, where cell X represents the title cell, and cell X+1 indicates the path cell:

Row 0: Cell0, Cell1
Row 1: Cell0, Cell1
Row 2: Cell0, Cell1
Row 3: Cell0, Cell1
Row 4: Cell0, Cell1

javascript json typescript

Answer 1

Answer №1

I've devised a simple and organized approach for this task. By breaking down the process into two separate functions, we achieve modularity.

const myStrings: string[] = Datarows
    .map(getDetails) // extracting relevant information
    .map(formatString);     // formatting the information

// if necessary, ValueType can also be returned
type Details = {title: string, path: string};

function getDetails(row: DataRow): Details {
    const titleCell= row.cells.find((cell: Cell) => cell.Key === 'Title');
    const pathCell= row.cells.find((cell: Cell) => cell.Key === 'Path');

    // error handling in case Title or Path cell is not found
    if (titleCell === undefined || pathCell === undefined)
        throw new Error('');

    // if necessary, ValueType can also be returned
    return {title: titleCell.value, path: pathCell.value};
}

// Simple string interpolation for formatting the result
function formatString(details: Details, rowIndex: number) {
    return `Row ${rowIndex}: ${details.title}, ${details.path}`;
}

Answer 2

I've devised a simple and organized approach for this task. By breaking down the process into two separate functions, we achieve modularity.

const myStrings: string[] = Datarows
    .map(getDetails) // extracting relevant information
    .map(formatString);     // formatting the information

// if necessary, ValueType can also be returned
type Details = {title: string, path: string};

function getDetails(row: DataRow): Details {
    const titleCell= row.cells.find((cell: Cell) => cell.Key === 'Title');
    const pathCell= row.cells.find((cell: Cell) => cell.Key === 'Path');

    // error handling in case Title or Path cell is not found
    if (titleCell === undefined || pathCell === undefined)
        throw new Error('');

    // if necessary, ValueType can also be returned
    return {title: titleCell.value, path: pathCell.value};
}

// Simple string interpolation for formatting the result
function formatString(details: Details, rowIndex: number) {
    return `Row ${rowIndex}: ${details.title}, ${details.path}`;
}

Searching through a json object using typescript

Answer №1

Similar questions

What is the best way to customize a React component using TypeScript?

Passing props from parent component to map function in ReactJS results in undefined props

Code for a regular expression that permits either letters or numbers with symbols

Edit esri pop-up template

What is the best way to create a "check all" feature in React using child components?

Button's focus event doesn't trigger on iPad

Using Angular's $q service in the run block

Adding elements within a loop using jquery

Determining the optimal number of rows and columns based on an integer value

What is preventing JSFiddle from displaying this object?

What is the method for retrieving a value from my Node.js module once it has been modified by an asynchronous function?

Incorporating timed hover effects in React applications

Notify when the button value changes to "submit"

Error: JSDOM - The document variable has not been declared

javascript box is hidden to prevent displaying of values

Guide on creating a function that accepts an Array of strings as a parameter and displays the initial letter of each element individually on separate lines

Encountering a 404 error while using THREE.ImageUtils.loadTexture in three.js

Automated resizing for various monitor dimensions in HTML

Guide to initializing the state in pinia with Typescript

How can I implement the ternary operator in React Native and resolve my code issue?